Databases
StackOverflow2013
Postsdbo
POBackbone view delegateevents won't work
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POBackbone view delegateevents won't work
    text
    copied!<p>I'm having an issue with getting delegateEvents to work.</p> <p>here's my View definition:</p> <pre><code>//the "." in Mustache templating simply means it will iterate through an array of JSON objects var locationViewTemplate = '&lt;div class="ui-content-panel ui-content-panelLocationView ui-corner-all "&gt;&lt;div&gt;&lt;ul class="ui-content-list"&gt;' + '{{#.}}' + '&lt;li&gt;&lt;span&gt;{{Name}}&lt;/span&gt; &lt;a href="#"&gt;edit&lt;/a&gt;&lt;/li&gt;' + '{{/.}}' + '{{^.}}' + '&lt;li&gt;No Locations Defined&lt;/li&gt;' + '{{/.}}' + '&lt;/ul&gt;&lt;/div&gt;&lt;input type="text" id="locationName"&gt; &lt;input class="locationAdd" type="button" title="Add Location" id="locationAdd" value="Add"&gt;&lt;/div&gt;'; //module: Location (function(Location) { //define Model Location.LocationModel = Backbone.Model.extend({ initialize: function () { this.entityName = 'location'; } }); //define collection Location.LocationCollection = Backbone.Collection.extend({ model: Location.LocationModel, initialize: function () { this.entityName = 'location'; }, getAllLocations: function () { this.functionName = 'GetAll'; this.fetch(); } }); //define View(s) Location.LocationListView = Backbone.View.extend({ events: { 'click #locationAdd': 'addClickEvent' }, render: function () { $(this.el).html(Mustache.render(locationViewTemplate, this.collection.toJSON())); //this.delegateEvents(); return this; }, initialize: function() { this.render(); //this.delegateEvents(); }, addClickEvent: function (){ alert('this is the function'); } }); })(vHub.module('location')); </code></pre> <p>Here's the definition of the button that the selector '#locationAdd' should find:</p> <pre><code>&lt;input class="locationAdd" type="button" title="Add Location" id="locationAdd" value="Add"&gt; </code></pre> <p>I also call delegateEvents from the document ready event:</p> <pre><code>//steal the JS libs that we need steal('json2.js','mustache.js','underscore.js', 'jquery-ui-1.8.18.custom.min.js') .then('backbone.js') .then('./common.js') .then('./modules/FrameTop.js', './modules/Location.js') .then('./modules/AdminBasicsPage.js') .then( function() { $(function(){ initializeApp(); var Location = vHub.module('location'); var lc = new Location.LocationCollection(); lc.getAllLocations(); var lv = new Location.LocationListView({collection: lc}); $('#content').html($(lv.el).html()); }); }); </code></pre> <p>I've looked at what i could find here on stackOverflow, and tried some of those suggestions. But none have been successful yet. Any help would be greatly appreciated. Thanks!</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

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