无法从模板中的 with 访问 Backbone.js 集合/模型

Question

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

以下是模型、集合和视图定义（实际视图是从 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 返回之前渲染视图，这就是您的集合为空的原因。 fetch 需要时间才能返回，但您在调用 fetch 后立即调用 render。

要么在fetch函数的成功处理函数中调用render，要么将render绑定到集合的reset事件。