Marionette.js. CollectionView's. childView

Specify a childView in your collection view definition. This must be a Backbone view class definition, not an instance. It can be any Backbone.View or be derived from Marionette.View.

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>
<script id="foo-template" type="x-template/underscore">
	Foo template content
</script>

<script id="bar-template" type="x-template/underscore">
	Bar template content
</script>

JavaScript

const Model = Backbone.Model.extend({
	defaults: {
    isFoo: false
  }
});

const FooView = Mn.View.extend({
  template: '#foo-template'
});

const BarView = Mn.View.extend({
  template: '#bar-template'
});

const MyCollectionView = Mn.CollectionView.extend({
	collection: new Backbone.Collection(),
  childView(item) {
    // Choose which view class to render,
    // depending on the properties of the item model
    if  (item.get('isFoo')) {
      return FooView;
    }
    else {
      return BarView;
    }
  }
});

const foo = new Model({
  isFoo: true
});

const bar = new Model({
  isFoo: false
});

const collectionView = new MyCollectionView();
collectionView.render();

$('body').append(collectionView.$el);

// Renders a FooView
collectionView.collection.add(foo);

// Renders a BarView
collectionView.collection.add(bar);