Question

我有一个非常简单的代码，以便使用骨干/下划线模板。

HTML：

<script type="text/template" id="search_template">
    <div>Name comes here: <h4><%=name%></h4></div>
    <input type="text" id="search_input" />
    <input type="button" id="search_button" value="Search" />
</script>   
<div id="search_container"></div>

JS：

$(function(){
var SearchView = Backbone.View.extend({
    initialize: function(){
      this.render();
    },
    render: function(){
      var tmpl = $('#search_template').html(),
          compiled = _.template(tmpl, { name:'hello' });
      $(this.el).html(compiled);
    }
  });
  var search_view = new SearchView({ el: "#search_container" });  
});

问题是它无法看到应该传递给模板的密钥“name”。我仍然不明白为什么。

整个代码示例位于此处：http://plnkr.co/edit/7fV2azTh6cpjmUxIBHvJ?p=preview

Answer 1

您没有正确使用Underscore's template method。

编译步骤 not ，您可以在其中传递要由模板替换的参数。相反，编译步骤会生成一个函数。使用视图模型参数作为第一个参数调用已编译函数的结果将返回模板的字符串，其中包含视图模型的替换值。

render: function () {
    var tmpl = $('#search_template').html(),
    compiled = _.template(tmpl);
    this.$el.html(compiled({ name:'hello' }));
}

另外一点：请注意Backbone View如何为我们提供方便的this.$el，因此我们不需要再次执行$(this.el)步骤。

Answer 2

变化

compiled = _.template(tmpl, { name:'hello' });

到

compiled = _.template(tmpl)({ name:'hello' });

_.template返回接受要插入模板

的数据的函数

http://plnkr.co/edit/GqFBvepfukIwDGLQa8Ki?p=preview

Backbone无法看到传递给模板的密钥

2 个答案: