隐藏/显示Backbone模型视图的方法

Question

帮助我找到管理Backbone视图的最佳方法。

例如，我有一组视图MyCollectionView，其中包含MyModelView - 集合中每个模型的视图。

如果我想在页面上隐藏/显示某些模型该怎么办？

现在我遵循这样的方式：

• 每collection.each
使用model
• 在循环内部，我使用一些参数调用模型函数filter
• 在此功能中，我检查模型属性并调用model.trigger 'hide'或model.trigger 'show'
• 最后在model view我使用this.model.bind 'hide', this.hide, this我实际使用.hide()或.show()

这种方式似乎很糟糕......为什么我需要做这个长链的功能和事件。有没有最简单的方法？

谢谢！

Answer 1

你的模型不应该告诉他们应该做什么 - 它们应该代表数据而不应该参与控制应用程序 - 所以没有奇迹让你感觉不对：）

更优雅的方法是向MyCollectionView添加一个过滤方法，该方法将使用下划线方法过滤您想要显示/隐藏的视图并完成其工作......这样做 - 选择应显示哪些模型。然后使用hte匹配数组只需调用一个方法来渲染列表并将模型数组传递给它，这样它就可以渲染匹配模型的视图。

根据我创建此类过滤器的经验，我可以告诉您，对于较长的列表来说，删除整个列表在集合级别上进行过滤并再次仅渲染与过滤器查询匹配的视图可能会更有效。 jQuery hide / show可能有点费力 - 虽然这是一个问题，你只会有大量的数据/视图。

另外！利用绑定到集合的下划线方法 - 您不需要执行collection.each(...就可以了

var matches = collection.filter(function(model) { 
    return /*matching condition*/;
});

（还记得在渲染列表时使用documentFragment并附加到DOM预先生成的视图列表中，而不是逐个附加它们）