6

我从 Backbone.js 开始并尝试构建我的第一个示例应用程序 - 购物清单。

我的问题是当我获取项目集合时，可能不会触发重置事件，因此不会调用我的渲染方法。

模型：

Item = Backbone.Model.extend({
  urlRoot : '/api/items',
  defaults : {
    id : null,
    title : null,
    quantity : 0,
    quantityType : null,
    enabled : true
  }
});

收藏：

ShoppingList = Backbone.Collection.extend({
  model : Item,
  url : '/api/items'
});

列表显示：

ShoppingListView = Backbone.View.extend({

el : jQuery('#shopping-list'),

initialize : function () {
    this.listenTo(this.model, 'reset', this.render);
},

render : function (event) {
    // console.log('THIS IS NEVER EXECUTED');
    var self = this;
    _.each(this.model.models, function (item) {
        var itemView = new ShoppingListItemView({
            model : item
        });
        jQuery(self.el).append(itemView.render().el);
    });
    return this;
}

});

列表项视图：

ShoppingListItemView = Backbone.View.extend({

tagName : 'li',

template : _.template(jQuery('#shopping-list-item').html()), // set template for item

render : function (event) {
    jQuery(this.el).html(this.template(this.model.toJSON()));
    return this;
}

});

路由器：

var AppRouter = Backbone.Router.extend({

routes : {
    '' : 'show'
},

show : function () {
    this.shoppingList = new ShoppingList();
    this.shoppingListView = new ShoppingListView({
        model : this.shoppingList
    });
    this.shoppingList.fetch(); // fetch collection from server
}

});

申请开始：

var app = new AppRouter();
Backbone.history.start();

页面加载后，从服务器正确获取项目集合，但从不调用 ShoppingListView 的渲染方法。我做错了什么？

4

2 回答 2

27

这是你的问题：

" 当模型数据从服务器返回时，它使用 set (智能地) 合并获取的模型，除非您通过 {reset: true}" Backbone Docs

因此，您想使用 reset 选项触发 fetch：

this.shoppingList.fetch({reset:true}); // fetch collection from server

顺便说一句，您可以在视图上定义一个集合属性：

this.shoppingList = new ShoppingList();
  this.shoppingListView = new ShoppingListView({
     collection : this.shoppingList  // instead of model: this.shoppingList
  });
于 2013-04-11T21:44:50.580 回答
1

您使用的是 Backbone 1.0 吗？如果不是，请忽略这一点，否则，您可能会发现文档中有关Collection#fetch方法的内容很有趣。

引用变更日志：

"将 Collection 的 "update" 重命名为 set，与类似的 model.set() 并行，并与 reset 对比。它现在是获取后的默认更新机制。如果您想继续使用 "reset"，请通过 {reset ：对} “

因此，基本上，您不是在reset此处制作 a 而是在制作 a update，因此不会reset触发任何事件。

于 2013-04-11T22:27:39.180 回答