Marionette.js. Events. Event Bubbling

Events fired on a view bubble up to their direct parent views, calling any magic methods using the `childview:` prefix (more on that shortly) and any methods bound to the `childViewEvents` attribute. This works for built-in events, custom events fired with `triggerMethod` and bound events using `triggers`.

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>
<div id="container">
  <div class="foo-hook"></div>
</div>

JavaScript

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

const MyView = View.extend({
	template: _.template('MyView template. Click on me'),
  triggers: {
    click: 'click:view'
  },

  doSomething(...args) {
    this.triggerMethod('did:something', ...args);
  }
});

const ParentView = View.extend({
	el: '#container',
  regions: {
    foo: '.foo-hook'
  },
  childViewEventPrefix: 'childview',

  initialize() {
    this.showChildView('foo', new MyView());
  },

  onChildviewClickView(childView) {
    console.log('View clicked ', childView);
  },

  onChildviewDidSomething(childView) {
    console.log('Something was done to ', childView);
  }
});

const parentView = new ParentView();

const childView = parentView.getChildView('foo');
childView.doSomething(childView);