Providing a variable is optional in the underscore.js template

Question

I have this code:

_.templateSettings = {interpolate : /\{\{(.+?)\}\}/g}; var _d = _.template($('#_d').html()); $.get('/foo', function(data) { $('#output').html(_d(data)); }); 

and in HTML:

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

/foo returns something like {"name":"joe","phone":"12345"} , but sometimes it does not have a phone , so it just returns {"name":"joe"} , which will delay the template’s evaluation, therefore, nothing will be printed in output . How to make a variable optional?

EDIT: /foo is out of my control

Answer 1

Operator || useful for this kind of thing:

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

But since you are already using Underscore, you can use the _.defaults function. This approach is especially useful for providing default values ​​for multiple fields:

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

Answer 2

I liked the @namuol solution, another thing we could do is set a default hash hash in the extends model

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

Another option.

Answer 3

You may have html

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

Use the template as shown below to avoid the undefined variable for phone

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

Answer 4

A practical solution would be to include phone in the object, but with an empty value:

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

Answer 5

There are some good answers above, but you can use _.partial to get one function that applies the template with default values:

 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

And then there is the obvious: put this at the top of your template:

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

Working fragment:

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

(also like jsfiddle )