Backbone：View事件触发多次

Question

I'm novice in Backbone. I want to show a stock list, where user can open up any stock right from the list and change stock values. After that the whole list should refresh to show changed values.

So as I found out it's better not only to create collection but create collection and a list of stock models.

For this I created a stock collection view for main table and stock model view for adding rows to the table where each row is a single model.

So this is a collection view:

App.Views.StockTable = Backbone.View.extend({ ... initialize: function() { this.render(); }, render: function() { this.$el.html(this.template(this.collection)); this.addAll(); return this; }, addOne: function(stock) { var row = new App.Views.StockRow({ model: stock, suppliers: this.suppliers }); return this; }, addAll: function() { var suppliers = new App.Collections.Suppliers(); var that = this; suppliers.fetch({ success: function() { _.each(that.collection.toJSON(), that.addOne, that); } }); return this; } });

And this is my stock row view:

App.Views.StockRow = Backbone.View.extend({ el: 'tbody', templateRow: _.template($('#stockRow').html()), templatePreview: _.template($('#stockPreview').html()), events: { 'click #open': 'open' ... }, initialize: function() { this.render(); }, render: function() { this.$el.append(this.templateRow(this.model)) .append(this.templatePreview({ stock: this.model, suppliers: this.suppliers })); return this; }, open: function(e) { var element = $(e.currentTarget); element.attr('id', 'hide'); $('#stock' + element.data('id')).slideToggle('fast'); } ... });

I wrote just a piece of code. The problem is that when I click on '#open' that event triggers many times (right the quantity elements in the collection). So when I catch e.currentTarget there are many similar objects. What i do wrong?

Answer 1

I suspect you have multiple things going on here.

Without seeing your template, I suspect each of your StockRow rows are rendering a tag with the id="open" . Since id values should be unique, use a class in your link (example: class="open" ), and then reference that class in your click handler:

events: {
  'click .open': 'open'
}

Next, since each instance of the StockRow already has a model instance associated with it, just use this.model instead of trying to look it up out of the data attribute of the currentTarget .

open: function () {
  $('#stock' + this.model.id).slideToggle('fast');
}

But again, instead of using an id="stock" attribute in your template, use a class… say class="stock-preview" . Then just look for that in your open…

open: function () {
  this.$el.find('.stock-preview').slideToggle('fast');
}

The other piece that looks questionable to me is the call to this.addAll(); in the render method of the StockTable view. It is best practice to just have your render method render state, instead of having it trigger an ajax call to fetch the state.

For example, in your initialize you can setup some event handlers that react to your collection changing state (below is an incomplete example, just hoping to get you going in the right direction):

initialize: function (options) {
  …
  _.bindAll(this, 'render', 'renderRow');
  this.collection.on('add', this.renderRow);
  this.collection.on('reset', this.render);
},

render: function () {
  this.$el.html(this.tableTemplateWithEmptyTBodyTags());
  this.collection.each(this.renderRow);
  return this;
},

renderRow: function () {
  var row = new App.Views.StockRow({
    model:      stock,
    suppliers:  this.suppliers
  });
  this.$el.find('tbody').append(row.render().el);
  return this;      
}

And then outside the table view, you can do a suppliers.fetch() . Which when the response comes back should trigger the reset.