Appending another view within a region - marionette

Asked 19/5, 2013 at 10:33 Answered 21/3, 2015 at 6:32

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());
  }
});

Austriahungary answered 19/5, 2013 at 10:33 Comment(0)

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

Vaginitis answered 19/5, 2013 at 16:3 Comment(1)

someone could want to change content of region with sliding like iOS menu and destroy old after sliding. Mangling with two regions would be cumbersome. – Assort 8/7, 2014 at 18:25

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.

Euphemize answered 20/5, 2013 at 12:34 Comment(2)

thanks anil,i did try Marionette.Layout which serves my purpose but again marionette dosen't allow me to append a view unless there is a predefined container for it. Anyway's i'll have to do some more work on marionette to completely understand it. – Austriahungary 21/5, 2013 at 4:0

I dont if it works for you but you can check the page below github.com/marionettejs/backbone.marionette/blob/master/docs/…, as you can see, you dont have to define your regions statically, you define them programmaticaly whenever you need them. But as you said, you still need to have predefined container in your markup – Euphemize 23/5, 2013 at 7:59

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

Integrant answered 21/3, 2015 at 6:32 Comment(0)

HTML

App.js

Recommended topics

Hot tags