Marionette.js. CollectionView. Automatic Rendering

After the initial render the collection view binds to the "add", "remove" and "reset" events of the collection that is specified.

by marionettejs

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.radio/2.0.0/backbone.radio.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.marionette/3.0.0/backbone.marionette.js"></script>

JavaScript

const myCollection = new Backbone.Collection([{}]);

const MyView = Mn.View.extend({
  template: _.template('Some text')
});

const MyCollectionView = Mn.CollectionView.extend({
  collection: myCollection,
  childView: MyView,
  
  onRender() {
		console.log('Collection has been rendered');
  }
  
});

const myCollectionView = new MyCollectionView();

// Collection view will not re-render as it has not been rendered
myCollection.reset([{foo: 'foo'}]);

myCollectionView.render();
$('body').append(myCollectionView.$el);

// Collection view will re-render displaying the new model
myCollection.reset([{foo: 'bar'}]);