Layout and view management

Question

I begin with Backbone and I would like to implement a simple application in order to manage users and products objects. The page layout is always the same : the header (top page), the menu (left column) and the content (right column) but the header and menu contents depend on the current module (user or product).

I search the proper way to manage my page layout. Actually, I manage the header and menu in each method of my Backbone.Router but I think that is not the best solution.

var appRouter = Backbone.Router.extend({
    routes: {
        "users": "listUser",
        "users/new": "newUser",
        "users/:id": "showUser",
        "products": "listProduct",
        "products/new": "newProduct",
        "products/:id": "showProduct"
    },

    listUser: function() {
        if (this.userHeaderView == null) {
             var header= new UserHeaderView();
             header.render();
             this.userHeaderView = header;
        }
        if (this.userMenuView == null) {
             var menu= new UserMenuView ();
             menu.render();
             this.userMenuView = menu;
        }
        this.contentView = new UserListView().render();
    }

    // ...

    newProduct: function() {
        if (this.productHeaderView == null) {
             var header= new ProductHeaderView();
             header.render();
             this.productHeaderView = header;
        }
        if (this.productMenuView == null) {
             var menu= new ProductMenuView();
             menu.render();
             this.productMenuView = menu;
        }
        this.contentView = new NewProductView().render();
    }

    // ...
});

Layout and view management

Answers (1)

Related Questions