1

我正在使用主干，我想在我看来解析我的第一个集合。

我的第一个问题，undescore真的是最好的方法吗？我听说过mustache.js

接下来的事情是，我不知道该怎么做：

var A = new Model();
var B = new Model();
var Mole = new Collection([A, B]);
var View = View({model: A, collection: Mole });
View.render();

这是我的渲染方法：

render: function(){
  this.template = _.template($('template').html());
  $(this.el).html(this.template(this.collection.models)); //I don't know what to send here
}

这是我的模板

<script type="text/template" id="template">
  <% _.each(collection, function(model){ %> //I don't know what to get here
    <% model.name %>
  <% }); %>
</script>
4

1 回答 1

14

首先，_.template想要模板中的文本，而不是 jQuery 对象。这意味着：

this.template = _.template($('template'));

应该是这样的：

this.template = _.template($('template').html());

然后编译的模板函数将希望查看数据的键/值对；来自精美手册（这适用于 Mustache、Handlebars 和 Underscore BTW）：

当您评估模板函数时，传入一个数据对象，该对象具有与模板的自由变量对应的属性。

所以你想说：

this.$el.html(this.template({
    collection: this.collection.toJSON()
}));

然后你可以在你的模板中这样说：

<% _.each(collection, function(model) { %>
  <%= model.name %>
<% }); %>

需要考虑的几点：

  1. Backbone 视图已经包含了一个 jQuery this.el，this.$el所以不需要$(this.el).
  2. 序列化数据通常使用 传递给模板toJSON，这对 Mustache 和 Handlebars 双重适用，因为它们不会理解其他任何内容。
  3. 你需要说<%= ... %>在你的模板中得到一些输出；<% ... %>只需评估一些 JavaScript 代码，它不会留下任何东西，您必须为此使用插值分隔符（<%=默认%>情况下）。
于 2013-01-29T01:41:15.120 回答