backbone.js网站应用项目设计

Question

我正在用Backbone.js + Require.Js + Python设计大型应用程序。我有一个关于在左侧布局中显示菜单项的问题。因此，对于菜单中的每个选项，我都需要在中间布局中显示内容。我确信视图只包含在中间布局中显示的相关内容。如何动态呈现中间布局。我需要使用Ajax吗？或者backbone.js模板机制支持这种动态。例如，我有一个产品列表和一个用户列表。左侧的菜单项是"product“和"user”。对于点击“产品”，它应该在中间布局中显示产品项目。我在哪里配置菜单，使其在不改变中间布局的情况下都可用。

Raja k

Answer 1

主干视图包含用于菜单的标记和html容器元素的根容器/模板，以支持动态布局(中间layout).

• Create是代表每个菜单项的根主干视图的主干视图(

1. ，在中间布局中动态显示的产品)。触发器在根主干视图上为每个菜单项定义事件哈希及其相应的处理程序或回调。触发绑定到菜单项的回调委托给控制器(自定义js对象)以加载中间布局所需的数据。
2. accordingly.

随后将数据传递到相应的子主干视图，并且子布局为

使用{

• ：

}调用路由器导航方法以更新url

​

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.
  }

});

​