jquery - Backbone.js : Access specific item when clicked -


Menu archive) I would like to know which menu item was clicked. In the menu item, I bind the "click" event to a "clicked" function, but when I click it is not a fire. I found the closest solution for this: and I repeat the same functionality Tried ... though I think I made it almost the same copy, I still can not seem to work on it I had to go through all those positions that seem to solve the issue of clicking the model / item, but none of them was helping. Any help would be appreciated. I know that getting a clickable menu and its ID is probably very straightforward in simple jquery, but I thought I would use it as an example to learn backbone.

HTML

  & lt; Header & gt; & Lt; Ul id = "nav" & gt; & Lt; / Ul & gt; & Lt; / Header & gt;   

  (function ($) {window.app = window.app || {}; // target: if selected = true, highlighting menu items MenuItem = Backbone.Model.extend ({label: "default label", selected: incorrect, id: 0}); MenuList = Backbone.collection.extend ({Model: MenuItem, initialize: function (model, option) {/ / Nothing ... yet}}); // Returns to a single item which returns a look like this: // 
  • UL"), start: function () {this.menulist = new menuist (empty, {view: this}); _top all This, "RenderItem"};}, renderItem: function (model) {var menuitemView = new menu item ({model: model}); menuitemView.render (); $ (this.el) .append (menuitemView.el); }, Rendering: function () {this.collection.each (this.renderItem);}, set active page: function (ev) {warning ($ (ev.target) .text ()); window.app.footerview Update item number (new): new item menu ({{id: 1, label: "item 1", selected: true}, {id: 2, label: "item 2", selected: incorrect} {Id: 3, take Force: "item 3", selected: wrong}, {id: 4, label: "item 4", selected: wrong}]; window.app.menuview = new menuist view ({archive: items}); window.app .menuview.render ();. $ ("Title") html (window.app.menuview.el);}) (JQuery);

    This can be seen on the example jsfiddle: ..

    Your problem here is right:

      $ ("header"). Html (window.app.menuview.el);   

    Your window.app.menuview.el is already in DOM because you have defined it like this:

     < Code> El: $ ("header> gt; ul")   

    When you $ ('header'). Html (...) , you are exiting & lt; Header & gt; and then change it to its el ; But, your .html () call has killed event representatives that installs to manage event on backbone sequences. The result is that you end with the correct HTML in the DOM but you do not have any event handling.

    Drop your $ ("header"). Html (Windows App.menuview.el) and things will start working.

    On the one hand, you are defined as $ (this.el) , backbone ideas are already defined so that you instead have this. $ El .

  • Comments