把手Block Helper:每个都有排序

Question

我有一个json对象数组,我使用Handlebars模板输出; 我目前正在使用{{#each object}} ... {{/ each}}.我现在需要通过对象的一个​​属性对对象进行排序,使用把手助手和coffeescript也没问题,但是,我的模板中有一个问题,我无法解决如何使用每个对象进行迭代.

到目前为止,我的研究表明,我可能需要编写一个自定义Handlebars帮助器,实际上,它将是:

{{#each_with_sort array}}

我现有的排序助手是这样的

   Handlebars.registerHelper sort_me =>
     myArray.sort (a,b)->
       return if +a.sort_index >= +b.sort_index then 1 else -1

但是,我很难在模板中使用已排序的数组 - 例如,它不是那么简单

 {{#each sort_me(myArray)}}

数据来自第三方API,因此我必须在handlebars/coffeescript中执行排序.

Answer 1

最简单的方法是在数据到达Handlebars之前对数据进行排序,然后你可以{{#each ...}}照常使用,不需要任何助手.这种方法在Handlebars中很常见,模板通常分为两部分:一个(Java | Coffee)脚本部分用于数据修改/重新排列和模板本身.

另外,您需要调整比较器函数以表现属性.从精细手册:

如果compareFunction提供,则根据比较函数的返回值对数组元素进行排序.如果a和b是两个元素进行比较,那么:

• 如果compareFunction(a, b)小于0,则排序a为低于索引b,即先出现索引.
• 如果compareFunction(a, b)返回0,离开a,并b相对于彼此不变,但对于所有不同的元素进行排序.注意:ECMAscript标准不保证这种行为,因此并非所有浏览器(例如可追溯到至少2003年的Mozilla版本)都尊重这一点.
• 如果compareFunction(a, b)大于0,则排序b为低于的索引a.

所以你想要返回0if a.sort_index和b.sort_index是相同的,更像是这样:

myArray.sort (a,b)->
  a = +a.sort_index
  b = +b.sort_index
  return  1 if a > b
  return  0 if a == b
  return -1 if a < b

如果你必须在模板中进行排序,那么你需要添加一个自定义each_with_sort助手来进行排序和迭代,如下所示:

# If you're always sorting by sort_index then you don't need the key argument
# and you might want to put the '+'-casting back in.
Handlebars.registerHelper('each_with_sort', (array, key, opts) ->
    data  = Handlebars.createFrame(opts.data) if(opts.data)
    array = array.sort (a, b) ->
        a = a[key]
        b = b[key]
        return  1 if a > b
        return  0 if a == b
        return -1 if a < b
    s = ''
    for e, i in array
        data.index = i if(data) # Support the usual @index.
        s += opts.fn(e, data: data)
    s
)

你的模板是这样的:

{{#each_with_sort array "sort_index"}}
    ...
{{/each_with_sort}}

演示:http://jsfiddle.net/ambiguous/zusq2tt4/