把手Block Helper:每个都有排序

时间:2013-07-15 19:15:05

标签: json coffeescript handlebars.js

我有一个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中执行排序。

2 个答案:

答案 0 :(得分:12)

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

顺便说一句,您需要调整比较器函数以表现属性。来自fine manual

  

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

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

所以如果0a.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/

答案 1 :(得分:0)

我只是收集各种javascript函数,然后像这样将其推送到车把上:

Handlebars.registerHelper({
    eq: (v1, v2) => v1 === v2,
    ne: (v1, v2) => v1 !== v2,
    lt: (v1, v2) => v1 < v2,
    gt: (v1, v2) => v1 > v2,
    lte: (v1, v2) => v1 <= v2,
    gte: (v1, v2) => v1 >= v2,    
    sort() {
        return arguments[0].sort();
    }
});

我这样使用它:

{{#each (sort students)}}
  <div> {{this}} </div>
{{/each}}

{{#if (eq arg1 arg2)}}
  <div> Delete </div>
{{/if}}

如果你需要很多函数,你可以将 helper 拆分为“if”函数和“each”函数......只是为了让它更有条理..