Marionette.js. Events. Child View Events

The View and CollectionView are able to monitor and act on events on any children they own. Any events fired on a view are automatically propagated to their direct parents as well.

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://rawgit.com/marionettejs/backbone.marionette/next/lib/backbone.marionette.js"></script>

JavaScript

const { View, CollectionView } = Marionette; // import { View, CollectionView } from 'backbone.marionette';

const collection = new Backbone.Collection([
	{title: 'Item 1'},
	{title: 'Item 2'},
  {title: 'Item 3'}
]);

const Item = View.extend({
	template: _.template('<a href=""><%= title %></a>'),
  tagName: 'li',
  triggers: {
    'click a': 'select:item'
  }
});

const MyCollectionView = CollectionView.extend({
	el: 'body',
  tagName: 'ul',
  childView: Item,
	collection: collection,
  childViewEvents: {
    'select:item': 'itemSelected'
  },

  itemSelected(childView) {
    console.log('item selected: ' + childView.model.cid);
  }
});

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