Appending another view within a region - marionette

8
votes

I was using Backbone LayoutManager for managing my views within the app. I wanted to try marionette. I came across a issue where i couldn't append a view to a region.

HTML

<body>
  <div id="content">
       <header id="header"></header>
       <div id="wrapper">
               <span>Some View Content</span>
       </div>
       <footer id="footer"></footer>
  </div>
</body>

App.js

MyApp = new Backbone.Marionette.Application();
var rm = new Marionette.RegionManager();

var regions = rm.addRegions({
    mainRegion : '#content',
    headerRegion : '#header',
    wrapperRegion : '#wrapper',
    footerRegion : '#footer'
});

regions.headerRegion.show(new HeaderView());
regions.wrapperRegion.show(new SomeView());
regions.footerRegion.show(new FooterView());

If i want to append another view in wrapperRegion how can do this ?

I also wanted to know is there a way to insert another view into my existing view? Layout Manager allowed me to do write below mentioned code.. How can i achieve something like this in marionette ?

var MyView = Backbone.View.extend({

  tagName: "div",

  beforeRender: function() {
     this.insertView(new ItemView());
  }
});
3
backbone.jsmarionette

3 Answers

10
votes

One view per region. Just define another region to put your other view in.

6
votes

You can simply make wrapper region a Marionette.Layout you can find the documentation at Marionette.LayoutView

Basically, layouts are extension of item views, which can have other regions in it recursively. Which means you can render multiple views in a layout and layout itself can be rendered in another region.

1
votes

To append view you need a layout view

Layout view has region manager

But first you need to add an element to be controlled by the region manager like 

var AppLayoutView = Backbone.Marionette.LayoutView.extend({
  template: "#layout-view-template",

  regions: { 
  }
  appendView: function ( incremennt, newView ){
     this.$el.append( '<div id="view'+increment+'" >' ) ;
     this.regionManager.addRegion( 'view'+increment , '#view'+increment )
     this['view'+increment].show ( newView ) ;
  }
});

Create a new id for the new view add it to the layout

Then region manager add it as region

you show your view there