Databases
StackOverflow2013
Postsdbo
POEvent triggered in all instances of Backbone.View
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POEvent triggered in all instances of Backbone.View
    text
    copied!<p>I'm displaying a table of categories with Backbone. I created two views:</p> <ul> <li><strong>RowView</strong> (containing a single tr)</li> <li><strong>TableView</strong> (containing table structure)</li> </ul> <p>The definitions:</p> <pre><code>RowView = Backbone.View.extend({ el: "#content table tbody", initialize: function() { this.render(); }, render: function(){ var params = { name: this.model.get('name'), route: this.options.route }; var template = _.template( $("#rowTemplate").html(), params); this.$el.append(template); }, events: { "click #name": "clickHandler" }, clickHandler: function( event ) { console.log('Browse subcategories of ' + this.model.get('name')); } }); TableView = Backbone.View.extend({ el: "#content", initialize: function(){ this.render(); }, render: function(){ var row = new this.collection(); var that = this; row.fetch({ success: function() { console.log('Collection fetch succeeded'); var params = { title: that.options.title, counter: row.at(0).get('counter'), route: that.options.route }; var template = _.template( $("#tableTemplate").html(), params); that.$el.html( template ); // RowView's are created by iteration here for(var x = 1; x &lt; row.length; x++) { var params = { model: row.at(x), route: that.options.route }; var view = new RowView(params); } } }); } }); </code></pre> <p>As you can see, I've attached a click event at the RowView.</p> <p>RowView template:</p> <pre><code>&lt;script type="text/template" id="rowTemplate"&gt; &lt;tr&gt; &lt;td id="name" class="fill"&gt;&lt;%= name %&gt;&lt;/td&gt; &lt;td&gt;&lt;a href="#&lt;%= route %&gt;/&lt;%= name %&gt;/edit" class="btn"&gt;Editar&lt;/a&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/script&gt; </code></pre> <p>Clicking any <code>#name</code> triggers the handler in all instance of the view. So when clicking one category I get:</p> <pre><code>Browse subcategories of category1 127.0.0.1:68 Browse subcategories of category2 127.0.0.1:68 etc... </code></pre> <p>As far as I know, that's because all <code>RowView's</code> are delegated to the same <code>el</code>.</p> <p>The first thing I though about was adding the <code>category name</code> to the <code>rowTemplate</code> and compare the value in the DOM with the value in the view to see which one actually triggers the event.</p> <p>But that solutions look really ugly. What's the correct way of accomplishing this in <code>Backbone</code>?</p> <p><strong>EXTRA:</strong> Is it considered better if I only create one view, and iterate in the template to generate the rows?</p> <p><strong>EDIT:</strong> I think the provided code is enough. Otherwise I can add them.</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