Appending another view within a region - marionette

backbone.js marionette

10,379

Solution 1

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

Solution 2

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.

Solution 3

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

10,379

Author by

user1184100

Updated on June 13, 2022

Comments

user1184100 almost 2 years

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

user1184100 almost 11 years

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.
anil almost 11 years

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
user2846569 almost 10 years

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.