backbone.js Web Application Project design

Question

I am designing large application with Backbone.js + Require.Js + Python. I have a question on Displaying menu items in the left layout. so for every selection in the menu, I need to show the content in the middle layout. I am sure the view holds only the relevent content for showing up in the middle layout. How do I render the middle layout dynamically. Should I need to use Ajax ? OR backbone.js template mechanism supports this dynamic. For example, I have a Product list as well as user list. Menu Item in the left side is "product" and "user" . For clicking "product" it should show the product items in the middle layout . Where do I configure the menu so that it will be available irrespective of changing the middle layout .

Raja k

http://stackoverflow.com/questions/15278312/need-help-understanding-the-basics-of-nested-views-in-backbone https://github.com/ccoenraets/directory-backbone-bootstrap/blob/master/tpl/ShellView.html — coding_idiot, Dec 14 '14 at 16:39

score 0 · Answer 1 · answered Dec 15 '14 at 07:28

A root container/template that contains markup for the menu and html container element like div to hold up the dynamic layout(middle layout).
Create a Backbone view that represents the root container.
Create child Backbone view for each of the menu items(Users,Products) that are displayed dynamically in the middle layout.
Define events hash and their corresponding handlers or callbacks on the root backbone view for each of these menu items.
The call back bound to the menu items delegates to a controller(a custom js object) to load the data required for the middle layout.
The data is then passed to the corresponding child backbone view and the child layout is rendered.
Finally, make a call to the routers navigate method with {trigger:false} to update the url accordingly.

var RootView = Backbone.view.extend({
  // Id of root container that contains menu and container for middle layout
  el : "#root_container", 
  events : {
    "click #user_link" : "initUserLayout",
    "click #prod_link" : "initProdLayout"
  },
  
  function : initUserLayout() {
    // A Custom Controller object that loads data.
    // Used to Seperate the data load logic from the view.
   
    var data = myAppController.fetchUserData();
    // Creating the instance of the child view.
    
    var userView = new UserView({users: data});
    userView.render();
   
    // Calling router instance's navigate method to update the url accordingly. 
   
    myAppRouter.navigate(url);
  },
  
  function : initProdLayout() {
     // A Custom Controller object that loads data.
     // Used to Seperate the data load logic from the view.
     var data = myAppController.fetchProdData();
  
     // Creating the instance of the child view.
     var prodView = new ProductView({prod: data});
     prodView.render();
   
     // Calling router instance's navigate method to update the url       accordingly. 
     myAppRouter.navigate(url);
  },
    
  function : render() {
    // Display the root container.
  }
      

});

var UserView = Backbone.view.extend({
  
  id : "user_container", 
  tagName : "div",
  userData : null,
 
  function : initialize(options) {
   this.userData = options.users;
  },
  
  function : render() {
    // Invoke the template compiler with the user data and append generated
    // html to the container element for middle layout in the dom.
  }

});

var ProductView = Backbone.view.extend({
  
  id : "prod_container", 
  tagName : "div",
  prodData : null,
 
  function : initialize(options) {
   this.prodData = options.prod;
  },
  
  function : render() {
    // Invoke the template compiler with the user data and append generated
    // html to the container element for middle layout in the dom.
  }

});

backbone.js Web Application Project design

1 Answers1