将视图绑定到backbone.js 中的集合答案

【问题标题】：Bind a view to collections in backbone.js将视图绑定到backbone.js 中的集合
【发布时间】：2013-03-08 17:13:28
【问题描述】：

我是半新的骨干。我正在尝试将集合绑定到视图，以便在将新模型添加到集合时更新视图。我认为当您使用模型执行此操作时，您可以绑定到模型的更改事件。但是你如何对集合做同样的事情呢？

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");} );
    }
});

点击事件触发并添加到集合中。但是如何让它更新视图呢？

【问题讨论】：

标签： backbone.js backbone-views backbone-events backbone.js-collections

【解决方案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

希望这会有所帮助！

【讨论】：

【解决方案2】：

这是我很久以前学习的一个很好的教程。

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

它可以帮助您定义一个 DonutCollectionView，当给定一个甜甜圈集合时，它将为每个甜甜圈呈现一个 UpdatingDonutView。

【讨论】：