Search code examples
javascriptbackbone.jsmarionette

Wtat's differences between getRegion and showChildView


const template1 = _.template('<h1>Marionette says hello!</h1>');
const template2 = _.template('<h1>Marionette is awesome!</h1>');
const myView1 = new Mn.View({template: template1});
const myView2 = new Mn.View({template: template2});
const MyView = Mn.View.extend({
  el: '#container',
  template: false,
  regions: {
    region1: '#region1',
    region2: '#region2'
  },
  onRender() {

    this.getRegion('region1').show(myView1);
    this.showChildView('region2', myView2); 

  }
});
const myView = new MyView();
myView.render();

What's differences between 2 methods in this code getRegion and showChildView?


Solution

  • It's only a shortcut syntax, from the Marionette doc:

    layoutView.getRegion('menu').show(new MenuView());
    
    layoutView.getRegion('content').show(new MainContentView());
    

    There are also helpful shortcuts for more concise syntax.

    layoutView.showChildView('menu', new MenuView());
    
    layoutView.showChildView('content', new MainContentView());
    

    The code behind showChildView

    showChildView(name, view, ...args) {
        const region = this.getRegion(name);
        return region.show(view, ...args);
    }