Geek Answers Handbook

Adding another view to the region - puppet

I used the Backbone LayoutManager to manage my views in the application. I wanted to try a puppet. I ran into a problem when I could not add a view to the area.

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 add another view to wrapperRegion, how do I do this?

I also wanted to know if there is a way to insert another view into my existing view? The layout manager allowed me to write the code below. How can I achieve something like this in a puppet?

 var MyView = Backbone.View.extend({ tagName: "div", beforeRender: function() { this.insertView(new ItemView()); } });
+8
marionette
source share
3 answers

One view for each region. Just define a different region to include a different view.

+10
source share

You can just do the Marionette.Layout wrapper area, you can find the Marionette.LayoutView documentation

Basically, layouts are an extension of representations of elements that other regions in it can have recursively. This means that you can display several views in the layout, and the layout itself can be displayed in another region.

+6
source share

To add a view, you need a layout view

The layout view has an area manager

But first you need to add an element that will be managed by the region manager, for example

 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 identifier for the new view, add it to the layout

Then the area manager adds it as an area

you show your opinion there

+1
source share

More articles:


All Articles