最简单的做法是在数据到达 Handlebars 之前对其进行排序,然后您可以{{#each ...}}
照常使用,不需要任何帮助。这种方法在 Handlebars 中很常见,模板通常分为两部分:用于数据修改/重新排列的 (Java|Coffee) 脚本部分和模板本身。
顺便说一句,您需要调整比较器函数来表现属性。来自精美手册:
如果compareFunction
提供,则数组元素根据比较函数的返回值进行排序。如果a
和b
是要比较的两个元素,则:
- 如果
compareFunction(a, b)
小于 0,则排序a
到比 低的索引b
,即 a 优先。
- 如果
compareFunction(a, b)
返回 0,则彼此保持不变a
,b
但对所有不同元素进行排序。注意:ECMAscript 标准不保证这种行为,因此并非所有浏览器(例如,至少可以追溯到 2003 年的 Mozilla 版本)都尊重这一点。
- 如果
compareFunction(a, b)
大于 0,则排序b
到比 更低的索引a
。
0
因此,如果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/