3

我正在努力将 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>
4

1 回答 1

6

如果您的代码确实如您的问题所示，那么问题是您在fetch返回之前渲染视图，这就是您的集合为空的原因。返回需要时间，fetch但您在调用render后立即调用fetch。

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

于 2012-05-22T12:15:43.797 回答