Marionette.js. CollectionView. Child Event Bubbling

When a child view triggers an event, that event will bubble up one level to the parent collection 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>

JavaScript

const myModel = new Backbone.Model();

const myCollection = new Backbone.Collection([
    {title: 'Item 1', order: 1 },
    {title: 'Item 4', order: 4 },
    {title: 'Item 3', order: 3 },
    {title: 'Item 2', order: 2 }
]);
  
const SomeChildView = Mn.View.extend({
  template: _.template('<a>Title: <%= title %></a>'),
  tagName: 'li',
	model: myModel,
  triggers: {
    'click a': 'select:item'
  }
});

const MyCollectionView = Mn.CollectionView.extend({
  childView: SomeChildView,
  collection: myCollection,
  tagName: 'ul',

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

const myCollectionView = new MyCollectionView();

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