Backbone.js：嵌套视图的路由

Question

I'm trying to figure out following scenario:

Lets say that I have two views: one for viewing items and one for buying them. The catch is that buying view is a sub view for viewing.

For routing I have:

var MyRouter = Backbone.Router.extend({
  routes: {
    'item/:id': 'viewRoute',
    'item/:id/buy': 'buyRoute'
  }
});

var router = new MyRouter;

router.on("route:viewRoute", function() {
  // initialize main view
  App.mainview = new ViewItemView();

});

router.on("route:buyRoute", function() {
  // initialize sub view
  App.subview = new BuyItemView();
});

Now if user refreshes the page and buyRoute gets triggered but now there is no main view. What would be best solution to handle this?

Answer 1

I am supposed that the problem you are having right now is that you don't want to show some of the stuff inside ViewItem inside BuyView? If so then you should modularized what BuyView and ViewItem have in common into another View then initialize it on both of those routes.

Here is a code example from one of my apps

https://github.com/QuynhNguyen/Team-Collaboration/blob/master/app/scripts/routes/app-router.coffee

As you can see, I modularized out the sidebar since it can be shared among many views. I did that so that it can be reused and won't cause any conflicts.

Answer 2

You could just check for the existence of the main view and create/open it if it doesn't already exist.

I usually create (but don't open) the major views of my app on booting up the app, and then some kind of view manager for opening/closing. For small projects, I just attach my views to a views property of my app object, so that they are all in one place, accessible as views.mainView, views.anotherView, etc.

I also extend Backbone.View with two methods: open and close that not only appends/removes a view to/from the DOM but also sets an isOpen flag on the view.

With this, you can check to see if a needed view is already open, then open it if not, like so:

if (!app.views.mainView.isOpen) {
    // 
}

An optional addition would be to create a method on your app called clearViews that clears any open views, perhaps with the exception of names of views passed in as a parameter to clearViews . So if you have a navbar view that you don't want to clear out on some routes, you can just call app.clearViews('topNav') and all views except views.topNav will get closed.

check out this gist for the code for all of this: https://gist.github.com/4597606