Ancestry with App.addRegions - backbone.js

Question

If you add a region to a layout view using the regions hash like so:
regions: {
compositeRegion: '#ui.compositeViewDiv',
modalRegion:{
regionClass:modal,
selector:'.modalRegion'
}
}
The views that you show in those regions can call triggerMethod and trigger an event on their parent view.
If instead I build my regions (for instance, in a composite view or even an item view) like so:
App.addRegions({
compositeRegion: '#ui.compositeViewDiv',
modalRegion:{
regionClass:modal,
selector:'.modalRegion'
}
Nothing happens when you call triggerMethod. It does not seem to have the _parent attribute defined on the region.
If I manually set _parent to any view, it will trigger a method on the next highest up layout view.
For example, I have a Layout view "A" with a composite view "B", and that composite view "B" has an item view "C". If I create a region using App.addRegions code above in the item view "C", I can then set the _parent and show a view like so:
App.modalRegion._parent = this;
App.modalRegion.show(new someView());
The Layout view "A" childEvent is triggered, not the item view "C", nor the Composite view "B".
If I manually call
this.triggerMethod('sameeventname');
on the item view "C", it WILL trigger the composite view "B"'s childEvent.
Any ideas? I need to be able to use my modal region (takes any marionette view and turns it into a jQuery-UI modal) from anywhere. It works great when you use it with the layout view region hash. But since there is no region hash in a composite or item view, it works but will not communicate with its parent view.

Answer 1

I would recommend having a look at James Kyle's Marionette Wires, in particular the way services are used to display global components such as modal and flashes in his example.
The basic architecture is an application, with a LayoutView containing a region for each component. This is rendered on initialize and the component is passed the region from the app.
For rendering a view in a modal something like the following should work:
//layout-view.js
import { LayoutView } from 'backbone.marionette';
export const BaseLayout = LayoutView.extend({
regions: {
modal: '.modal',
...
}
});
//app.js
import { Application } from 'backbone.marionette';
import { BaseLayout } from './layout-view';
export const App = Application.extend({
initialize(options = {}) {
this.layout = new Layout({
el: options.el
});
this.layout.render();
}
});
//modal/service.js
import { Service } from 'backbone.service';
const ModalService = Service.extend({
setup(options = {}) {
this.container = options.container;
},
requests: {
show: 'show',
hide: 'hide'
},
show(view) {
this.container.show(view);
},
hide() {
this.container.empty()
}
});
export const modalService = new ModalService();
//main.js
import { App } from './app';
import { modalService } from './modal/service';
const app = new App({
el: '.root-element'
});
modalService.setup({
container: app.layout.modal
});
.... init other components
//someComponent/index.js
import { modalService } from '../modal/service';
...
showView() {
const view = new View();
modalService.request('show', view)
.then(doSomething)
.catch(err => {
console.error(err);
});
},
hideView() {
modalService.request('hide')
.then(doSomething);
}