在underscore.js模板中使变量可选

Question

我有这段代码：

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

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

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

在HTML中：

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

/foo 返回类似于 {"name":"joe","phone":"12345"}，但有时它并没有 phone，因此只返回 {"name":"joe"}，这会使模板评估出错，结果在 output 中没有打印任何内容。我如何使变量可选？

编辑： /foo 超出了我的控制。

- wiradikusuma

Answer 1

∥运算符在这种情况下非常有用：

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

但是既然您已经在使用Underscore，您可以使用_.defaults函数。这种方法特别适用于为多个字段提供默认值：

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

- namuol

Answer 2

我喜欢@namuol的解决方案，我们还可以在模型扩展中设置默认哈希值。

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

另一个选择。

- Roberto Alarcon

Answer 3

您可以拥有一个HTML网页

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

使用以下模板可以避免phone未定义变量的问题：

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

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

- Venkat Kotra

Answer 4

上面有一些不错的答案，但是你可以使用 _.partial 来获得一个应用默认值模板的单个函数：

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"

- Cody

Answer 5

还有一个很明显的事情：将此放在您的模板顶部：

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

工作代码片段：

$(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 as jsfiddle)

（注：该段文本为HTML代码，不做翻译）

- Peter V. Mørch

Answer 6

一个实际的解决方案是在对象中包含phone，但值为空：

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

- Joel A. Villarreal Bertoldi