我开发了一个jquery& backbone.js网络应用。
一个组件有一个html表,在这个表后面是一个backbone.js集合
此集合中的任何更改都应导致更新html表,因此我写了
this.collection.bind("reset add remove", this.renderRows, this);
所以当更新整个集合时,更新html表,添加新模型以及删除模型时。
当用户悬停并点击html表的某一行时,还会调用一个详细视图组件。在这个组件的开头,我从集合中获得了正确的模型
changeModel = this.collection.get(id);
用户更改了某些属性后,我
changeModel.set(attrs);
并返回到html表。集合中的模型具有正确的更改值。
但是html表没有更新,因为没有触发3个事件(重置,添加,删除)。
所以我将“替换”添加到集合绑定
this.collection.bind("replace reset add remove", this.renderRows, this);
在从详细信息视图返回之前,我打电话给
this.collection.trigger("replace");
我的解决方案有效,但我的问题是:
是否有任何“原生”的backbone.js解决方案已经存在并且我已经错过了,而且我不需要自己触发某些内容?
答案 0 :(得分:46)
模型中的change
事件会冒泡到集合中。 (annotated source中集合的_onModelEvent
函数。该方法基本上从模型中获取所有事件并在集合上触发它们。
这导致
change
change
change
所以
this.collection.bind("replace reset add remove", this.renderRows, this);
必须替换为此
this.collection.bind("change reset add remove", this.renderRows, this);
希望这有帮助!
P.S。
我个人认为,如果只更改一个模型,则不应重绘整个表格。而是使每个表行本身具有相应模型作为其模型,然后对其中的属性更改做出反应。如果您只定位一个表单元格,则重绘500个表单元格是没有意义的。
<强>更新强>
现在你应该使用on
方法来绑定事件。
collection.on("change reset add remove", this.renderRows, this);
如果您正在使用BB 1.0,并且正在View
内收听此事件,我建议您使用新的listenTo
绑定到事件中,这样也可以轻松解除绑定致电view.remove()
。在这种情况下,你应该这样做:
// assuming this is the view
this.listenTo(collection, "change reset add remove", this.renderRows);