백본 js 클릭 이벤트

Question

json의 두 ID로 내 백본 앱 링크를 만드는 데 문제가 있습니다. 템플릿을 사용하기 전에 단순히 변수 id. 내 링크 테이블 .../table:id/을 클릭 한 후 .../tables/했지만 ....

나의 첫번째 테이블 템플릿 테이블에 다음 메뉴이며, 내가 .../table:id/menu:id 같은 카테고리보기가 보여됩니다, 두 배열에서이 메뉴 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> 

첫 번째 테이블은 리 I 싶어 중 하나를 클릭 한 후

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); 
      } 
     }) 
    }   
}); 

그리고 내 목표는이 .... 클릭 I 후 .../table:id/menu:id/

내 json a가 있습니다. 차 컬렉션 ....

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 파일로 분리하는 것을 고려해야합니다. 콜렉션이 작성할 오브젝트를 알 수 있도록 각 콜렉션에서 모델을 정의해야합니다.

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