javascript - 主干集合保持模型变异的排序顺序

Question

如果我有一个带有比较器的集合。 (在 CoffeeScript 中)

class Words extends Backbone.collection
    comparator: (word)->
        word.get('score')

如果我正在更改，我如何保持集合排序 基础项目的分数。这个想法是 将其附加到 ListView ，其中带有 最低分总是在最前面。

我一直在对集合手动调用排序 每次我改变一个实例，但这似乎不是 鉴于整个列表已排序，效率太高 有一个项目。

我可能会尝试删除变异的项目并且 然后再添加。

有什么建议吗？

Answer 1

由于一个简单的原因，渲染代码看起来效率非常低:DOM 操作代价高昂。只要有可能，您应该操作 DOM 一次而不是多次。 JavaScript/CoffeeScript 中的所有其他优化都是次要的。

这是主要代码(来自链接到 ambertch 回复的第二条评论的要点):

refresh: ->
    @list.listview("refresh")

appendWord: (word)->
    wv = new WordView({model: word}).render().el
    @list.append( wv )
    @refresh()

render: ->
    @list.html("")
    @model.each (word) => @appendWord(word)
    @refresh()

因此，在render 中，首先清除列表的 HTML；然后对于每个单词，列表的 HTML 被清除并且控件被刷新!

我不熟悉 jQuery Mobile，所以我不确定主要的惩罚是发生在 append(就像在 jQuery 中一样)还是发生在 listview('refresh' )，但是很容易重写循环来避免这两种情况，并且还可以删除一些函数定义/调用开销:

render: ->
  html = []
  @model.each (word) ->
    html.push(new WordView(model: word).render().el)
  @list.empty().append(html)

现在您只有一个 html setter 和一个 refresh 调用，而不是一个 html setter，n append 调用，和 n+1 refresh 调用!