Javascript 主干：查看事件触发器多次

我是个新手。 我想显示一个股票列表，用户可以从列表中打开任何股票权利并更改股票价值。之后，整个列表应刷新以显示更改的值

所以我发现，不仅要创建集合，还要创建集合和股票模型列表

为此，我为主表和库存模型视图创建了一个库存集合视图，用于向表中添加行，其中每行都是一个模型

这是一个集合视图：

App.Views.StockTable=Backbone.View.extend({
...
初始化：函数（）{
这个。render（）；
},
render:function（）{
this.el.html（this.template（this.collection））；
这是addAll（）；
归还这个；
},
addOne：功能（库存）{
var行=新建App.Views.StockRow({
型号：股票，
供应商：这是供应商
});
归还这个；
},
addAll:function（）{
var suppliers=新的App.Collections.suppliers（）；
var=这个；
供应商。获取({
成功：函数（）{
_.each（that.collection.toJSON（）、that.addOne、that）；
}
});
归还这个；
}
});

这是我的股票行视图：

App.Views.StockRow=Backbone.View.extend({
el:‘tbody’，
templateRow:3;.template（$（'#stockRow'）.html（）），
templatePreview:x0.template（$（'#stockPreview'）.html（）），
活动：{
“单击#打开”：“打开”
...
},
初始化：函数（）{
这个。render（）；
},
render:function（）{
this.el.append（this.templateRow（this.model））
.append（this.templatePreview({
股票：这个型号，
供应商：这是供应商
}));
归还这个；
},
开放：功能（e）{
var元素=$（e.currentTarget）；
attr（'id'，'hide'）；
$（“#stock”+element.data（'id'））.slideToggle（'fast'）；
}
...
});

我只写了一段代码。问题是，当我单击“#打开”时，该事件会多次触发（在集合中的quantity元素右侧）。因此，当我捕捉到e.currentTarget时，有许多类似的对象。
我做错了什么？
我怀疑你这里发生了很多事情

在没有看到您的模板的情况下，我怀疑您的
StockRow
行中的每一行都呈现了一个带有
id=“open”
的标记。由于id值应该是唯一的，请在链接中使用类（例如：
class=“open”
），然后在单击处理程序中引用该类：

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

接下来，由于
StockRow
的每个实例都已经有一个与之关联的
model
实例，只需使用
this.model
，而不是试图从
currentTarget
的
data
属性中查找它

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

但同样，不要在模板中使用
id=“stock”
属性，而是使用类…比如说
class=“stock preview”
。那就在你的开放空间里找吧

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

对我来说，另一个值得怀疑的地方是调用
this.addAll（）在
StockTable
视图的
render
方法中。最好的做法是让渲染方法呈现状态，而不是让它触发ajax调用来获取状态

例如，在初始化中，您可以设置一些事件处理程序来响应集合的更改状态（下面是一个不完整的示例，只是希望让您朝着正确的方向前进）：

然后在表视图之外，您可以执行
suppliers.fetch（）
。当响应返回时，应触发重置

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;      
}