1

2 つの配列からの ID を使用したリンクの作成に問題があります ...

テーブルのこのビュー (テンプレート)....li イベントをクリックした後は機能しません...助けてください。

<script type="text/template" id="table-template">
    <% _.each(tables, function(table) { %>
        <% _.each(table.get("tables"), function(table) { %>


                <li class="tableli" data-table_id="<%= table.id %>">

                    <div class="obrazok"></div>

                    <%= table.name %>

                </li>


        <% }); %>
    <% }); %> 
</script>

メニューテンプレートがあります：

<script type="text/template" id="menu-template">
    <% _.each(menus, function(menu) { %>
        <% _.each(menu.get("menus"), function(menu) { %>


            <li class="menucls" data-menu_id="<%= menu.id %>">

                <%= menu.name %>

            </li>


        <% }); %>    
    <% }); %>
</script>

私のコレクション...

//====
//! Tables 
//====
var Tables = Backbone.Collection.extend({
    url: 'api/menus_and_tables.json'
});


//====
//! Menus 
//====
var Menus = Backbone.Collection.extend({
    url: 'api/menus_and_tables.json'
});

私のjson：

{
     "id" : 1,
 "tables" : [{
                 "name": "Table 1",
                 "id": 1
             }],
  "menus" : [{
                 "name": "Main Menu",
                 "id": 1

             }]
}

私の最初のテーブル ビュー:

 var TablesView = Backbone.View.extend({       

    events: {
      "click li.tableli" : "openMenuItem"
    },

    openMenuItem: function(e){
      currentLink = $(e.currentTarget);
      tableId = currentLink.data('table_id');
      app.navigate("table/" + tableId + "/menus");
      console.log("table/" + tableId + "/menus");
    },  

        initialize:function () {
        this.render();
    },
    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);
            }
        })
    }             
});

私の2番目のメニュービュー：

var MenusView = Backbone.View.extend({

    events: {
      "click li.menucls" : "openMenuItem"
    },

    openMenuItem: function(e){
      currentLink = $(e.currentTarget);
      menuId = currentLink.data('menu_id');
      console.log("menuId: " + menuId );
    },     

    initialize:function () {
    this.render();
    },
    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);
            }
        })
    }             
});

すべてがコンテンツ div にレンダリングされます:

<header class="header"></header>

<div class="container">
    <div class="row-fluid">
        <div id="content" class="span12>">


            <!-  There is rendered content  ->


        </div>        
    </div>
</div>

<footer class="footer"></footer>
4

1 に答える 1

1

最後に、私はあなたに答えるために多くの時間を見つけることができました. ここにいくつかのコードを入れます。まず、index.html

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Backbone.js</title>
  <script src="jquery-1.8.1.min.js"></script>
   <script src="underscore.js"></script>
  <script src="backbone.js"></script>
  <script src="menu_bar_collections.js"></script>
  <script src="menu_bar_table.js"></script>
  <script src="menu_bar_menus.js"></script>
<script type="text/template" id="table-template">
    <% _.each(tables, function(table) { %>
        <% _.each(table.get("tables"), function(table) { %>


                <li class="tableli" data-table_id="<%= table.id %>">

                    <div class="obrazok"></div>

                    <%= table.name %>

                </li>


        <% }); %>
    <% }); %> 
</script>
<script type="text/template" id="menu-template">
    <% _.each(menus, function(menu) { %>
        <% _.each(menu.get("menus"), function(menu) { %>


            <li class="menucls" data-menu_id="<%= menu.id %>">

                <%= menu.name %>

            </li>


        <% }); %>    
    <% }); %>
</script>  
<script>
$(function(){

var menuView = new MenusView()
menuView.render()
var tableView = new TablesView()
tableView.render()

});
</script>

</head>

<body>
  <div id="content_to_menu"></div>
  <div id="content_to_table"></div>
</body>
</html>

私はあなたのコレクションを変更しませんでした。しかし、私は見方を変えました：

var MenusView = Backbone.View.extend({

    el: '#content_to_menu',

    events: {
      "click li.menucls" : "openMenuItem"
    },

    openMenuItem: function(e){
      currentLink = $(e.currentTarget);
      menuId = currentLink.data('menu_id');
      alert("menuId: " + menuId );
    },     

    initialize:function () {
    this.render();
    },
    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);
            }
        })
    }             
});

およびテーブル ビュー:

var TablesView = Backbone.View.extend({

    el: '#content_to_table',

    events: {
      "click li.tableli" : "openMenuItem"
    },

    openMenuItem: function(e){
      currentLink = $(e.currentTarget);
      tableId = currentLink.data('table_id');
      alert("tableId: " + tableId);
    },     
        initialize:function () {
        this.render();
    },
    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);
            }
        })
    }             
});

私はそれがあなたを助けることを願っています、頑張ってください！

于 2013-08-29T12:03:22.850 に答える