1

我在与来自两个数组的 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);
            }
        })
    }             
});

我的第二个菜单视图：

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 回答