骨干集合保持模型变异的排序顺序

bra*_*ing 7 javascript sorting coffeescript backbone.js

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

class Words extends Backbone.collection
    comparator: (word)->
        word.get('score')
Run Code Online (Sandbox Code Playgroud)

如果我要更改基础项目的分数,如何对集合进行排序.我们的想法是将其附加到列表视图中,其中得分最低的项目始终位于顶部.

每次我改变一个实例时,我都会在集合上手动调用sort,但考虑到整个列表用一个项目排序,这似乎不太有效.

我可能尝试删除变异的项目然后再添加它.

有什么建议?

Tre*_*ham 5

由于一个简单的原因,渲染代码看起来非常低效: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()
Run Code Online (Sandbox Code Playgroud)

所以,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)
Run Code Online (Sandbox Code Playgroud)

现在你只有一个htmlsetter和一个refreshcall,而不是一个htmlsetter,n个 append调用和n + 1个 refresh调用!