variable opcional en la plantilla underscore.js

Question

tengo este código:

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

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

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

y en HTML:

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

/foo vuelve algo así como {"name":"joe","phone":"12345"}, pero a veces no tiene por lo tanto simplemente phone devuelve {"name":"joe"}, lo que ahogará la evaluación de la plantilla, por lo que nada se imprime en output. ¿Cómo hago que una variable sea opcional?

EDIT:/foo está más allá de mi control

Answer 1

El operador || es útil para este tipo de la cosa:

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

Pero ya que ya está utilizando Underscore, puede usar la función _.defaults. Este enfoque es particularmente útil para proporcionar valores predeterminados para múltiples campos:

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

Answer 2

Una solución práctica sería incluir phone en el objeto, pero con un valor vacío:

 

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

Answer 3

me ha gustado @namuol solución, otra cosa que podríamos hacer es configurar el hash por defecto en el modelo se extiende

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

Sólo otra opción .

Answer 4

Puede tener un html

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

Utilice la plantilla de la siguiente manera para evitar la emisión variable no definida para phone

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

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

Answer 5

Hay algunas buenas respuestas anteriores, pero se puede usar _.partial para obtener una función única que aplica una plantilla con los valores predeterminados:

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

Y luego está lo obvio: Pon esto en la parte superior de su plantilla:

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

Trabajo fragmento:

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

(también como jsfiddle)