Привязать представление к коллекциям в backbone.js

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

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


backbone.js backbone-events backbone-views backbone.js-collections
person Jeff    schedule 08.03.2013    source источник

Ответы (2)


arrow_upward
3
arrow_downward

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

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

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

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

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

person danii    schedule 08.03.2013

arrow_upward
2
arrow_downward

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

Введение в Backbone.js: Часть 3. Привязка коллекции к представлению

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

person Venkat Kotra    schedule 08.03.2013