將backbone.js中的集合綁定到一個視圖

Question

對於主幹我是半新的。我試圖將一個集合綁定到一個視圖，這樣當一個新模型被添加到一個集合中時，該視圖就會被更新。我想當你用模型做這件事時，你可以綁定到模型的變化事件。但你如何對收藏品做同樣的事情？

App.Views.Hotels = Backbone.View.extend({ 

    tagName: 'ul', 

    render: function() { 
     this.collection.each(this.addOne, this); 
     var floorplanView = new App.Views.Floorplans({collection:floorplanCollection}); 
     $('.floorplans').html(floorplanView.render().el); 
     return this; 
    }, 

    events: {'click': 'addfloorplan'}, 

    addOne: function(hotel) { 
     var hotelView = new App.Views.Hotel ({model:hotel}); 
     this.$el.append(hotelView.render().el); 
    }, 

    addfloorplan: function() { 
     floorplanCollection.add({"name": "another floorplan"}); 
    } 
}); 

App.Collections.Floorplans = Backbone.Collection.extend({ 
    model: App.Models.Floorplan, 
    initialize: function() { 
     this.bind("add", function() {console.log("added");}); 
    } 
}); 

click事件觸發並添加到集合中。但是，我怎樣才能更新視圖？

Answer 1

您可以收聽收藏的add事件，其中在將新項目添加到收藏時觸發。在現代版本的Backbone中，方法listenTo優於bind或on，用於監聽事件。 （Read de documentation for more info）

例如，在你的情況下，這應該做的伎倆：

App.Views.Hotels = Backbone.View.extend({ 

    initialize: function() { 
    this.listenTo(this.collection,'add', this.addOne); 
    }, 
    //rest of code 

希望這有助於！

Answer 2

這是我很久以前跟隨的一個很好的教程。

An Intro to Backbone.js: Part 3 – Binding a Collection to a View

它可以幫助你定義一個DonutCollectionView將給出甜甜圈的集合時，使每個圓環的UpdatingDonutView。