Geek Answers Handbook

Need help understanding the basics of nested representations in the trunk

I did a bunch of reading about nested views in backbone.js and I understand it well, but one thing that still puzzles me is ...

If my application has a shell view that contains sub-tasks, such as page navigation, footer, etc. that do not change when using the application, I need to display a wrapper for each route or do some verification in the view to make sure Does it already exist?

It would seem to me if someone did not hit the "home" route before moving forward in the application.

I did not find anything useful in this matter in my googling, so any advice is appreciated.

Thanks!

+7
source share
1 answer

Since your “shell” or “layout” view never changes, you must do it when you start the application (before starting any routes) and display more views in the layout view.

Say your layout looked something like this:

<body> <section id="layout"> <section id="header"></section> <section id="container"></section> <section id="footer"></section> </section> </body>

Your layout view might look something like this:

 var LayoutView = Backbone.View.extend({ el:"#layout", render: function() { this.$("#header").html((this.header = new HeaderView()).render().el); this.$("#footer").html((this.footer = new FooterView()).render().el); return this; }, renderChild: function(view) { if(this.child) this.child.remove(); this.$("#container").html((this.child = view).render().el); } });

Then you should set up the layout when the application starts:

 var layout = new LayoutView().render(); var router = new AppRouter({layout:layout}); Backbone.history.start();

And in your router code:

 var AppRouter = Backbone.Router.extend({ initialize: function(options) { this.layout = options.layout; }, home: function() { this.layout.renderChild(new HomeView()); }, other: function() { this.layout.renderChild(new OtherView()); } });

There are several ways to discard this particular cat, but I usually process it. This gives you a single control point ( renderChild ) for rendering your "top level" views and ensures that the previous item is remove d before the new one is rendered. It can also come in handy if you ever need to change the way your views are displayed.

+15
source

More articles:


All Articles