javascript - 无法从模板中访问 Backbone.js 集合/模型

Question

我正在努力将我在 Backbone.js 中的模型集合传递到模板中。每次我尝试访问模型(即 this.collection.models)时，我只会得到一个空数组，即使我知道该集合包含两个类型为 Contact 的模型。我确定我在这里遗漏了一些基本的东西。将模型传递给 Backbone.js 模板的标准方法是什么？

以下是模型、集合和 View 定义(实际 View 是从 Backbone.js 路由器函数中调用的——为简洁起见，此处不包括路由器的源代码):

var Contact = Backbone.Model.extend({
  urlRoot: '/contacts.json',
  idAttribute: '_id',
  parse: function(response) {
    return response;
  }
});

var Contacts = Backbone.Collection.extend({
  model: Contact,
  url: '/contacts.json',
  parse: function(response) {
    return response.data;
  }
});

var ListContactsView = Backbone.View.extend({
  el: $('#content'),
  template: _.template($('#list-contacts-tpl').html()),
  initialize: function() {
    this.collection = new Contacts();
    this.collection.fetch();
    this.render();
  },
  render: function() {
    console.log(this.collection);
    this.$el.html(this.template({ contacts: this.collection.models }));
  }
});

模板定义如下:

<script id="list-contacts-tpl" type="text/template">
  <% console.log(contacts); %> 
</script>

Answer 1

如果您的代码确实如您的问题所示，则问题在于您在 fetch 返回之前呈现 View ，这就是您的集合为空的原因。 fetch 需要时间才能返回，但您在调用 fetch 后立即调用 render。

在 fetch 函数的成功处理程序中调用 render，或者将 render 绑定(bind)到 reset 事件的集合。