Making zmienna opcjonalnie w underscore.js szablonu

Question

mam ten kod:

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

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

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

i HTML:

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

/foo powraca coś podobnego {"name":"joe","phone":"12345"}, ale czasami nie ma po prostu w ten sposób phone zwraca {"name":"joe"}, co spowoduje dławienie oceny szablonu, dlatego nic nie zostanie wydrukowane w output. Jak utworzyć zmienną opcjonalną?

EDIT:/foo jest poza moją kontrolą

Answer 1

Operator || jest przydatny dla tego rodzaju rzeczy:

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

Ale skoro już jesteś używając znaku podkreślenia, możesz użyć funkcji _.defaults. Takie podejście jest szczególnie przydatna dla zapewnienia domyślne dla wielu dziedzin:

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

Answer 2

Praktycznym rozwiązaniem byłoby włączenie phone w obiekcie, ale z pustym wartość:

 

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

Answer 3

lubiłem @namuol rozwiązanie, inna sprawa, że ​​mogliśmy zrobić, to ustawić domyślne hash w modelu rozciąga

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

Kolejna opcja .

Answer 4

Możesz mieć html

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

użyć szablonu, jak poniżej, aby uniknąć niezdefiniowanej zmiennej problem dla phone

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

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

Answer 5

Istnieje kilka dobrych odpowiedzi powyżej, ale można użyć _.partial aby uzyskać pojedyncza funkcja, która stosuje szablon z wartościami domyślnymi:

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

A potem jest oczywista: umieścić to w górnej części szablonu:

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

Praca snippet:

$(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>

(również jako jsfiddle)