骨干列表绑定到集合

时间:2016-07-10 14:23:04

标签: model-view-controller backbone.js collections

我试图了解如何引用和使用传递给视图的集合。似乎没有任何关于该系列的参考,但正在使用它的模型。此外,当我使用绑定到我的api的集合时,我无法获取要绑定/显示的集合项目,但是当我使用硬编码集合时它可以工作。是因为我需要在某个时刻获取我的收藏品吗?我的收藏很好,路径很好。我在我的应用程序中使用它没有任何问题。

以下是代码:

module.exports = Backbone.Collection.extend({

    model: Employee,

    url:"api/employees"

});

MainView

 module.exports = base.extend({
      el:  '#content',
      template:template,
        initialize: function () {

            // var items = new EmployeeCollection([
            //     {id: 1, firstName: "Test1 fName", lastName: "Test1 lName"},
            //     {id: 2, firstName: "Test2 fName", lastName: "Test2 lName"},
            //     {id: 3, firstName: "Test3 fName", lastName: "Test3 lName"}
            // ]);

            EmployeeListCollection = new EmployeeCollection();
            //this.itemView = new EmployeeListView({collection: items}); //this syntax works if I uncomment the code above to create my item list
            this.itemView = new EmployeeListView({collection: EmployeeListCollection}); //do i need to fetch the collection at some point?

            this.render();

          },
          render: function(){

            this.el.innerHTML = Mustache.to_html(this.template);

            this.itemView.render();

            $("#empList").html(this.itemView.el);
          }
});

ItemListView - 传入的集合在哪里被引用?我看到了一个模型参考,但我传入了一个集合。

module.exports = base.extend({

    //tagName:'ul',
    tagName:'select',

    initialize: function(){
        _.bindAll(this, "renderItem");

    },

    renderItem: function(model){
        console.log('employeelistloop render');

        this.itemView = new EmployeeListItemView({model: model});
        this.itemView.render();
        $(this.el).append(this.itemView.el);
    },

    render: function(){
        this.collection.each(this.renderItem);
    },

});

1 个答案:

答案 0 :(得分:0)

实际上,我想我认为问题是什么。我确实需要在ItemListView中获取集合。我现在也意识到渲染是在renderitem之前调用的,并且集合中的每个模型都被传递到renderitem函数。通过在我的渲染中调用fetch,我能够使我的集合工作:

var self = this;
this.collection.fetch().done(function(){
    self.collection.each(self.renderItem);
});

所以这一切都有意义。但我仍然不完全理解我的代码运行两次的原因。当我在MainView的初始化和渲染中执行console.log时,每次第一次运行时都会收到两次调用。