骨干js点击事件

Question

我在使用json的两个id在我的骨干应用程序链接中创建了问题。在模板中添加变量id之前。我的联系是.../tables/点击表.../table:id/后，但在表下一个菜单，我点击后，需要将这个菜单的id从两个阵列，像.../table:id/menu:id会有显示分类视图....

我首先表模板

<script type="text/template" id="table-template"> 
    <% _.each(tables, function(table) { %> 
     <li class="tableli" data-table_id="<%= table.get('id') %>"> 
      <div class="obrazok"></div> 
      <%= table.get('name') %> 
     </li>  
    <% }); %> 
</script> 

首先表查看

var TablesView = Backbone.View.extend({  

    initialize:function() { 
     this.render(); 
    }, 
    tagName: "ul",  
    events: { 
     "click li.tableli" : "openMenuItem" 
    }, 
    openMenuItem: function(e){ 
     currentLink = $(e.currentTarget); 
     tableId = currentLink.data('table_id'); 
     app.navigate("table" + tableId + "/menus", true); 
     console.log("table/" + tableId + "/menus"); 
    }, 
    render:function() { 
     var that = this; 
     var tables = new Tables(); 
     tables.fetch({ 
      success: function (tables) { 
      var template = _.template($('#table-template').html(), {tables: tables.models}); 
       that.$el.html(template); 
      } 
     }) 
    } 
}); 

单击确定后，李我想要的一个有链接像...table:id/并打开只有菜单视图

我的菜单视图：

<script type="text/template" id="menu-template"> 
    <% _.each(menus, function(menu) { %> 
     <li class="menucls" data-menu_id="<%= menu.get('id') %>"> 
      <%= menu.get('name') %> 
     </li> 
    <% }); %> 
</script> 

菜单视图：

var MenusView = Backbone.View.extend({ 
    initialize:function() { 
     this.render(); 
    }, 
    tagName: "ul", 
    events: { 
     "click li.menucls" : "openMenuItem" 
    }, 
    openMenuItem: function(e){ 
     currentLink = $(e.currentTarget); 
     menuId = currentLink.data('menu_id'); 
     tableId = currentLink.parent().data('table_id'); 
     app.navigate("table" + tableId + "/menu" + menuId + "/", true); 
     console.log("menuId: " + menuId); 
     console.log("tableId: " + tableId); 
    },  
    render:function() { 
     var that = this; 
     var menus = new Menus(); 
     menus.fetch({ 
      success: function (menus) { 
      var template = _.template($('#menu-template').html(), {menus: menus.models}); 
       that.$el.html(template); 
      } 
     }) 
    }   
}); 

还有就是我的目标....之后点击我需要链接像.../table:id/menu:id/

还有就是我的一个JSON第二集合....

tables.json

[ 
    {"name": "Table 1","stts": "redstts","id": 1}, 
    {"name": "Table 2","stts": "redstts","id": 2}, 
    {"name": "Table 3","stts": "redstts","id": 3}, 
    {"name": "Table 4","stts": "redstts","id": 4}, 
    {"name": "Table 5","stts": "redstts","id": 5} 
] 

menus.json

[ 
    {"name": "Menu 2","id": 1}, 
    {"name": "Menu 2","id": 2} 
] 


var Table = Backbone.Model.extend({ 
    defaults: {"name": "Table unahmed"} 
}); 

var Tables = Backbone.Collection.extend({ 
    url: 'api/tables.json', 
    model: Table 

});  

var Menu = Backbone.Model.extend({ 
    defaults: {"name": "Menu unahmed"} 
}); 

var Menus = Backbone.Collection.extend({ 
    url: 'api/menus.json', 
    model: Menu 
}); 

我的主要JS

var AppRouter = Backbone.Router.extend({ 

routes: { 
    "" : "tables", 
    "orders" : "orders", 
    "tables" : "tables", 
    "table:id/menus" : "menus", 
    "products" : "products", 
    "table:id/menu:id/" : "categories" 

    }, 

    initialize: function() { 
     this.headerView = new HeaderView(); 
     $('.header').html(this.headerView.el); 
    }, 

    tables: function() { 
     if (!this.TablesView) { 
      this.TablesView = new TablesView(); 
     } 
     $('#content').html(this.TablesView.el); 
     this.headerView.selectMenuItem('tables-menu'); 
    }, 

    menus: function() { 
     if (!this.MenusView) { 
      this.MenusView = new MenusView(); 
     } 
     $('#content').html(this.MenusView.el); 
     this.headerView.selectMenuItem('menus-menu'); 
    }, 

    categories: function (tableId, menuId) { 
     if (!this.CategoriesView) { 
      this.CategoriesView = new CategoriesView(); 
     } 
     $('#content').html(this.CategoriesView.el); 
     this.headerView.selectMenuItem('categories-menu'); 
    }, 

    products: function() { 
     if (!this.ProductsView) { 
      this.ProductsView = new ProductsView(); 
     } 
     $('#content').html(this.ProductsView.el); 
     this.headerView.selectMenuItem('products-menu'); 
    } 
}); 



utils.loadTemplate(['HeaderView'], function() { 
    app = new AppRouter(); 
    Backbone.history.start(); 

}); 

我还是尽量让功能事件芽无果...事件是功能，但在链接是 #tableundefined/menu1/

我非常感谢每一个答案。 关注Makromat !!!

Answer 1

你应该考虑分离出表和菜单为单个JSON文件，因为你有设计有表和菜单Backbone collection保持相同的数据。您还应该在每个集合中定义一个模型，以便集合知道要创建的对象。

// tables.json 
[ 
    {"id": 1, "name": "Table 1"}, 
    {"id": 2, "name": "Table 2"}, 
] 

// menus.json 
[ 
    {"id": 1, "name": "Menu 1"}, 
    {"id": 2, "name": "Menu 2"} 
] 

var Table = Backbone.Model.extend({ 
    defaults: {"name": "Unnamed Table"} 
}); 

var Tables = Backbone.Collection.extend({ 
    url: 'api/tables.json', 
    model: Table 
}); 

var Menu = Backbone.Model.extend({ 
    defaults: {"name": "Unnamed Menu"} 
}); 

var Menus = Backbone.Collection.extend({ 
    url: 'api/menus.json' 
    model: Menu 
}); 

此外，考虑一个看起来Backbone's router处理状态的变化，因为用户点击不同的链接。

当你定义使用多变量的路线，他们需要的是独特的功能处理的路线应该定义相应的参数。

// sample route 
'table:tableId/menu:menuId' : 'categories' 

// sample handler 
categories: function (tableId, menuId) { 
    // TODO: use tableId and menuId to set your application's state 
    // possibly by fetching a specific collection or setting a view's model 
}