Привязка представления к коллекциям в магистрали.JS

Я почти новичок в позвоночнике. Я пытаюсь привязать коллекцию к представлению, чтобы при добавлении новой модели в коллекцию представление обновлялось. Я думаю, что когда вы делаете это с моделями, Вы можете привязать к событию изменения модели. Но как сделать то же самое с коллекциями?

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 срабатывает и добавляется в коллекцию. Но как заставить его обновить вид?

2 3
backbone.js backbone-events backbone-views

2 ответа:

Вы можете прослушать событие коллекции add, которое срабатывает при добавлении нового элемента в коллекцию. В современных версиях Backbone Метод listenTo Предпочтительнее метода bind или метода on для прослушивания событий. (прочитайте документацию de для получения дополнительной информации )

Например, в вашем случае это должно сделать трюк: 

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

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

Надеюсь, это поможет!

3

Вот хороший учебник, которому я следовал давным-давно.

Вступление к позвоночнику.js: Часть 3-привязка коллекции к виду

Это поможет вам определить DonutCollectionView, который при наличии коллекции пончиков будет отображать UpdatingDonutView для каждого пончика.

2