Làm biến tùy chọn trong mẫu underscore.js

Question

tôi có mã này:

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

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

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

và trong HTML:

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

/foo lợi nhuận giống như {"name":"joe","phone":"12345"}, nhưng đôi khi nó không có phone do đó đơn giản trả về {"name":"joe"}, điều này sẽ làm tắc nghẽn đánh giá mẫu do đó không có gì được in trong output. Làm cách nào để tạo biến tùy chọn?

EDIT:/foo là ngoài tầm kiểm soát của tôi

Answer 1

Nhà điều hành || rất hữu ích cho loại này của điều:

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

Nhưng vì bạn đã sử dụng dấu gạch dưới, bạn có thể sử dụng chức năng _.defaults. Cách tiếp cận này đặc biệt hữu ích cho việc cung cấp giá trị mặc định cho nhiều lĩnh vực:

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

Answer 2

Một giải pháp thực tế sẽ được bao gồm phone trong đối tượng, nhưng với một giá trị rỗng:

 

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

Answer 3

tôi thích @namuol giải pháp, một điều mà chúng ta có thể làm là thiết lập giá trị mặc định băm vào mô hình mở rộng

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

Chỉ cần một lựa chọn .

Answer 4

Bạn có thể có một html

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

Sử dụng mẫu như dưới đây để tránh vấn đề biến undefined cho phone

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

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

Answer 5

Có một số câu trả lời tốt ở trên, nhưng bạn có thể sử dụng _.partial để có được một chức năng duy nhất áp dụng mẫu có mặc định:

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

Và sau đó là sự thật hiển nhiên: Đặt điều này trong đầu mẫu của bạn:

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

Working đoạn mã:

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

(cũng như jsfiddle)