backbone.js集合事件

Wol*_*mec 16 backbone.js

我开发了一个jquery&backbone.js网络应用程序.
一个组件有一个html表,在这个表后面是一个backbone.js集合.
这个集合中的任何更改都应该导致更新html表,所以我写了

this.collection.bind("reset add remove", this.renderRows, this);    
Run Code Online (Sandbox Code Playgroud)

所以当更新整个集合时,更新html表,添加​​新模型以及删除模型时.

当用户悬停并点击html表的某一行时,还会调用一个详细视图组件.在这个组件的开头,我从集合中获得了正确的模型

changeModel = this.collection.get(id);
Run Code Online (Sandbox Code Playgroud)

在用户更改了某些属性后,我这样做了

changeModel.set(attrs); 
Run Code Online (Sandbox Code Playgroud)

并返回到html表.集合中的模型具有正确的更改值.

但是html表没有更新,因为没有触发3个事件(重置,添加,删除).

所以我在集合绑定中添加了"replace"

this.collection.bind("replace reset add remove", this.renderRows, this);
Run Code Online (Sandbox Code Playgroud)

在从详细信息视图返回之前,我打电话给

this.collection.trigger("replace");
Run Code Online (Sandbox Code Playgroud)

我的解决方案有效,但我的问题是:

是否有任何"原生"的backbone.js解决方案已经存在并且我已经错过了哪些我不需要自己触发的东西?

jak*_*kee 46

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

这导致

  1. 模型属性已设置
  2. 模型触发器 change
  3. 收集捕获量 change
  4. 集合触发器 change

所以

this.collection.bind("replace reset add remove", this.renderRows, this); 
Run Code Online (Sandbox Code Playgroud)

必须用这个替换

this.collection.bind("change reset add remove", this.renderRows, this);
Run Code Online (Sandbox Code Playgroud)

希望这可以帮助!

PS

我的个人意见是,如果只更改一个模型,则不应重绘整个表格.而是使每个表行本身具有相应模型作为其模型,然后对其中的属性更改做出反应.如果您只定位一个,则重绘500个表格单元格毫无意义.

UPDATE

现在你应该使用on-method来绑定事件.

collection.on("change reset add remove", this.renderRows, this);
Run Code Online (Sandbox Code Playgroud)

如果你正在使用BB 1.0,并且在a中正在监听此事件View,我建议使用new listenTo来绑定事件,这也允许在调用时轻松解除绑定view.remove().在这种情况下,你应该这样做:

// assuming this is the view
this.listenTo(collection, "change reset add remove", this.renderRows);
Run Code Online (Sandbox Code Playgroud)

  • 谢谢.我认为你应该在原始答案前加上说"Backbone自我第一次写这篇文章以来增加了一些便利,如果你使用的是最新的Backbone,请参阅下面的更新." 对于我们中的一些人来说,看起来像答案的20行左右接近极限.再次感谢,有帮助. (4认同)