backbone.js集合事件

时间:2012-09-05 10:19:03

标签: backbone.js

我开发了一个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解决方案已经存在并且我已经错过了,而且我不需要自己触发某些内容?

1 个答案:

答案 0 :(得分:46)

模型中的change事件会冒泡到集合中。 (annotated source中集合的_onModelEvent函数。该方法基本上从模型中获取所有事件并在集合上触发它们。

这导致

  1. 设置模型属性
  2. 模型触发change
  3. 收集change
  4. 集合触发change
  5. 所以

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