0

我在我的主干应用程序链接中创建了来自 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 和集合....

表.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}
]

菜单.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/

我非常感谢每一个答案。问候马克罗马特！

4

1 回答 1

1

您应该考虑将表格和菜单分离到单独的 json 文件中，因为您拥有的设计具有包含相同数据的 Tables 和 Menus Backbone 集合。您还应该在每个集合中定义一个模型，以便集合知道要创建什么对象。

// 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 的路由器以处理用户单击不同链接时的状态变化。

当您定义使用多个变量的路由时，它们需要是唯一的，并且处理路由的函数应该定义相应的参数。

// 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
}
于 2013-09-01T15:09:23.067 回答