Fare variabile facoltativa nel modello underscore.js

Question

ho questo codice:

_.templateSettings = {interpolate : /\{\{(.+?)\}\}/g}; 

var _d = _.template($('#_d').html()); 

$.get('/foo', function(data) { 
    $('#output').html(_d(data)); 
}); 

e in HTML:

<div id="_d"> 
    {{name}} {{phone}} 
</div> 
<div id="output"></div> 

/foo restituisce qualcosa come {"name":"joe","phone":"12345"}, ma a volte non ha phone così semplice restituisce {"name":"joe"}, che può soffocare la valutazione del modello in modo che nulla venga stampato in output. Come faccio a rendere una variabile opzionale?

EDIT:/foo è oltre il mio controllo

Answer 1

L'operatore || è utile per questo genere di cosa:

$.get('/foo', function(data) { 
    data.phone = data.phone || ""; 
    $('#output').html(_d(data)); 
}); 

Ma poiché sei già utilizzando Underscore, è possibile utilizzare la funzione _.defaults. Questo approccio è particolarmente utile per fornire valori di default per più campi:

$.get('/foo', function(data) { 
    _.defaults(data, {name : 'joe', phone : ''}); 
    $('#output').html(_d(data)); 
}); 

Answer 2

Una soluzione pratica sarebbe quella di includere phone nell'oggetto, ma con un valore vuoto:

 

{"name":"joe","phone":""} 
 

Answer 3

mi piaceva @namuol soluzione, un'altra cosa che abbiamo potuto fare è impostare il default hash il modello si estende

var MyModel = Backbone.Model.extend({ 
    defaults: { 
     "foo": "I", 
     "bar": "love", 
     "yeah": "sara" 
    } 
}); 

Solo un'altra opzione .

Answer 4

Si può avere un html

<div id="d"> 
    {{data.name}} {{data.phone}} 
</div> 

utilizzare il modello seguito per evitare indefinito numero variabile per phone

_.templateSettings = { 
    interpolate : /\{\{(.+?)\}\}/g 
}; 

var template = _.template($('#d').html()); 
var jsonResponse = {"name":"Jeo"}; // phone is missing 
var result = template({"data":jsonResponse}); 

Answer 5

Ci sono alcune buone risposte di cui sopra, ma è possibile utilizzare _.partial per ottenere un singola funzione che applica un modello con valori predefiniti:

foobarTemplate = _.template('<%=foo%><%=bar%>') 
barPrefilled = _.partial(_.defaults, _, {bar:'def'}) 
foobarTemplate(barPrefilled({foo:'abc'})) 
// "abcdef" 
foobarTemplateWithDefaults = function (data) {return foobarTemplate(barPrefilled(data));} 
foobarTemplateWithDefaults({foo:'wat'}) 
// "watdef" 
foobarTemplateWithDefaults({foo:'foo', bar:'bar'}) 
// "foobar" 

Answer 6

E poi c'è l'ovvio: Mettere questo nella parte superiore del modello:

<% 
    if (typeof(phone) === "undefined") { 
    phone = ""; 
    } 
%> 

lavoro frammento:

$(function() { 
 
    $('#result').html(
 
    _.template(
 
     $('#template').html(), { 
 
     interpolate: /\{\{(.+?)\}\}/g 
 
     } 
 
    )({ 
 
     foo: 23, 
 
     // No value for bar 
 
     // bar: 11, 
 
    },) 
 
) 
 
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script type="x-template" id="template"> 
 
<% 
 
    if (typeof(bar) === "undefined") { 
 
    bar = "default"; 
 
    } 
 
%> 
 
This is {{ foo }} and {{ bar }} 
 
</script> 
 

 
<div id="result"></div>

(anche come jsfiddle)