Question

我在使用两个数组的ID进行make链接时遇到问题...

这个视图（模板）表...点击到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>

Answer 1

最后，我可以找到很多时间给你。我会在这里放一些代码。 fistly，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);
            }
        })
    }             
});

我希望，它会帮助你，祝你好运！

Backbonejs Click事件不起作用

1 个答案: