0

json から 2 つの ID を使用してバックボーン アプリ リンクを作成する際に問題があります。テンプレートを使用する前は、単に変数 id を使用していました。私のリンクは.../tables/テーブルへのクリック後ですが、テーブルには次のメニューがあり、カテゴリビューが表示される.../table:id/ように、両方の配列からこのメニューIDをクリックした後に必要です......./table:id/menu:id

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

最初のテーブル ビュー

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の1つをクリックした後、リンクのよう...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}
]

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/

私はすべての答えにとても感謝しています。よろしくマクロマット!!!

4

1 に答える 1

1

テーブルとメニューを個別の json ファイルに分離することを検討する必要があります。これは、設計には同じデータを保持するTables and 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
});

また、バックボーンのルーターを調べて、ユーザーが別のリンクをクリックしたときに状態の変化を処理することを検討してください。

複数の変数を使用するルートを定義する場合、それらは一意である必要があり、ルートを処理する関数は対応するパラメーターを定義する必要があります。

// 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 に答える