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

好的，点击其中一个 li 后，我想拥有...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
}