Search code examples
javascriptbackbone.jsmarionette

Re-render only changed section of Marionette.js CollectionView

Below is the code I currently have that re-renders a collectionView on every addition or removal of a model. However, it seems inefficient as it has to render the whole thing every time, when all I really need is one modelView to be removed or one to be added. So how could I achieve this?

var CollectionView = Marionette.CollectionView.extend({

    childView: ModelView,

    initialize: function() {
        [ "add", "remove" ].forEach(function(eventName) {
            this.listenTo(this.collection, eventName, this.render, this);
        }.bind(this));
    }

});

Thanks in advance for any help you can give!

Solution

  • This is already done automatically in Marionette:

    When a model is added to the collection, the collection view will render that one model in to the collection of item views.

    When a model is removed from a collection (or destroyed / deleted), the collection view will close and remove that model's item view.