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
}

Backbone js点击事件

1 个答案: