Marionette.js. Events. Event Bubbling Using `CollectionView`

This works exactly the same way for the `CollectionView` and its `childView`

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: 'click:child'
  }
});

const MyCollectionView = CollectionView.extend({
	el: 'body',
  tagName: 'ul',
  childView: Item,
	collection: collection,
  childViewEventPrefix: 'childview',
  onChildviewClickChild(childView) {
    console.log('Childview ' + childView + ' was clicked');
  }
});

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