Databases
StackOverflow2013
Postsdbo
POBackbone js click event
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POBackbone js click event
    primarykey
    data
    text
    <p>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 <code>.../tables/</code> after click to table <code>.../table:id/</code> But in table is next menu and I need after click to this menu ids from both array, like <code>.../table:id/menu:id</code> there will be showed category view....</p> <p><strong>My First Tables template</strong></p> <pre><code> &lt;script type="text/template" id="table-template"&gt; &lt;% _.each(tables, function(table) { %&gt; &lt;li class="tableli" data-table_id="&lt;%= table.get('id') %&gt;"&gt; &lt;div class="obrazok"&gt;&lt;/div&gt; &lt;%= table.get('name') %&gt; &lt;/li&gt; &lt;% }); %&gt; &lt;/script&gt; </code></pre> <p><strong>First Tables view</strong></p> <pre><code>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); } }) } }); </code></pre> <p>Ok After click to one of li I wanna have link like <code>...table:id/</code> and open only menus view</p> <p><strong>My menus view:</strong></p> <pre><code>&lt;script type="text/template" id="menu-template"&gt; &lt;% _.each(menus, function(menu) { %&gt; &lt;li class="menucls" data-menu_id="&lt;%= menu.get('id') %&gt;"&gt; &lt;%= menu.get('name') %&gt; &lt;/li&gt; &lt;% }); %&gt; &lt;/script&gt; </code></pre> <p><strong>Menu View:</strong></p> <pre><code> 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); } }) } }); </code></pre> <p>And there is my goal .... After click I need link like <code>.../table:id/menu:id/</code></p> <p>There is my json and collections....</p> <p>tables.json</p> <pre><code>[ {"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} ] </code></pre> <p>menus.json</p> <pre><code>[ {"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 }); </code></pre> <p>My main js</p> <pre><code>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(); }); </code></pre> <p>I still try to make function event bud without results... events is function but in link is <code>#tableundefined/menu1/</code> </p> <p>I'm very grateful for every answer. Regards Makromat !!!</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USMakromat
    1. USMakromat
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload