Backbone js cliquez sur l'événement

Question

J'ai des problèmes pour créer dans mon lien d'application backbone avec deux id de json. Avant j'avais dans le modèle simplement id variable. Mon lien était .../tables/ après un clic à la table .../table:id/ Mais dans le tableau est le menu suivant et j'ai besoin après un clic à ce menu ids à la fois tableau, comme .../table:id/menu:id il y aura montré la catégorie vue ....

Mon premier modèle Tables

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

tableaux Première vue

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

Ok Après avoir cliqué à l'un des li Je veux ont lien comme ...table:id/ et ouvrir seulement vue menus

Mon point de vue de menus:

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

Menu Vue:

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

Et il est mon but .... Après avoir cliqué I besoin lien comme .../table:id/menu:id/

Il y a mon json a nd collections ....

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

Mon principal 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(); 

}); 

J'essaie toujours de faire bourgeon événement fonction sans résultats ... les événements sont fonction mais dans le lien est #tableundefined/menu1/

Je suis très reconnaissant pour chaque réponse. Cordialement Makromat !!!

Answer 1

Vous devez envisager de séparer les tables et les menus dans des fichiers json individuels, car le modèle dont vous disposez dispose des tables et des menus Backbone collection contenant les mêmes données. Vous devez également définir un modèle dans chacune de vos collections afin que la collection sache quel objet créer.

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

Aussi, pensez à jeter un oeil un Backbone's router pour gérer le changement d'état que l'utilisateur clique sur les différents liens. Lorsque vous définissez un itinéraire qui utilise plusieurs variables, elles doivent être uniques et la fonction qui gère l'itinéraire doit définir les paramètres correspondants.

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