Backbone js click event

Question

I have problems create in my backbone app link with two ids from json. Before I had in template simply variable id. My link was .../tables/ after click to table .../table:id/ But in table is next menu and I need after click to this menu ids from both array, like .../table:id/menu:id there will be showed category view....

My First Tables template

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

First Tables view

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);
            }
        })
    }
});

Ok After click to one of li I wanna have link like ...table:id/ and open only menus view

My menus view:

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

Menu View:

 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);
            }
        })
    }           
});

And there is my goal .... After click I need link like .../table:id/menu:id/

There is my json and collections....

tables.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
});

My main 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();

});

I still try to make function event bud without results... events is function but in link is #tableundefined/menu1/

I'm very grateful for every answer. Regards Makromat !!!

JamesOR JamesOR · Accepted Answer · 2013-09-01T15:09:23

You should consider separating out the tables and menus into individual json files because the design you have has the Tables and Menus Backbone collection holding the same data. You should also define a model in each of your collections so the collection knows what object to create.

// 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
});

Also, consider taking a look a Backbone's router to handle the change of state as the user clicks on different links.

When you define a route that uses multiple variables, they need to be unique and the function handling the route should define the corresponding parameters.

// 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
}

Backbone js click event

1 Answers