Demo

Question

Demo

我想显示已排序的列表，同时还需要知道原始排序索引（org_index）。

怎么做？我应该在sorted的数组.registerHelper('eachSort')中注入一个新字段，例如：[{'name':'b', 'org_index': 0}, ...吗？

的js

Handlebars.registerHelper('eachSort', function(array, key, opts) {
  // requires: underscore
  var sorted = _.sortBy(array, function(item) {
    return item[key]
  });
  return Handlebars.helpers.each(sorted, opts);
});


var arr = [{'name':'b'}, {'name':'c'}, {'name':' a'}];

模板

<script type="text/x-handlebars-template" id="tpl-eachSort">
   {{#eachSort . 'name'}}
       name={{name}}=  / index_now={{@index}}= / index_org=?{{org_index}}= <br/>
   {{/eachSort}}        
</script>

结果

name= a= / index_now=0= / index_org=?= 
name=b= / index_now=1= / index_org=?= 
name=c= / index_now=2= / index_org=?=

Answer 1

如果您希望重复使用默认的each帮助程序，并且由于无法向其中注入某些功能，您可以按照建议将原始索引嵌入到项目中。虽然最简单的，直接将辅助元数据追加到数据中并不是很干净。

辅助

handlebars.registerHelper('eachSort', function(array, key, opts) {
    // append metadata into data
    for (var i = 0; i < array.length; i++) {
        array[i].originalIndex = i
    }
    // sort
    var sorted = _.sortBy(array, function(item) {
        return item[key]
    })
    // default each
    return handlebars.helpers.each(sorted, opts)
})

模板

{{#eachSort . 'name'}}
name={{name}}=  / index_now={{@index}}= / index_org={{originalIndex}}= <br/>
{{/eachSort}}

正确的方法是将@data变量用于此目的。您可以跳过默认的each帮助程序并手动滚动它，非常简单。

辅助

handlebars.registerHelper('eachSort', function(array, key, opts) {
    // zip for sorting
    var zipped = []
    for (var i = 0; i < array.length; i++) {
        zipped.push({
            originalData: array[i],
            originalIndex: i
        })
    }
    // sort
    var sorted = _.sortBy(zipped, function(item) {
        return item.originalData[key]
    })
    // custom each
    var result = ''
    for (var i = 0; i < sorted.length; i++) {
        var item = sorted[i]
        // set metadata as @data variables
        opts.data.index = i
        opts.data.originalIndex = item.originalIndex
        result += opts.fn(item.originalData, opts)
    }
    return result
})

模板

{{#eachSort . 'name'}}
name={{name}}=  / index_now={{@index}}= / index_org={{@originalIndex}}= <br/>
{{/eachSort}}

或者您可以更多地参与并使用@data变量和默认each助手。由于可以将函数用作@data变量，因此可以将@originalIndex数据变量注册为生成器，每次将它按照排序顺序逐个返回原始索引。 s叫：

handlebars.registerHelper('eachSort', function(array, key, opts) {
    // zip for sorting
    var zipped = []
    for (var i = 0; i < array.length; i++) {
        zipped.push({
            originalData: array[i],
            originalIndex: i
        })
    }
    // sort
    var sorted = _.sortBy(zipped, function(item) {
        return item.originalData[key]
    })
    // separate sorted data
    var originalData = []
    var originalIndex = []
    for (var i = 0; i < sorted.length; i++) {
        var item = sorted[i]
        originalData.push(item.originalData)
        originalIndex.push(item.originalIndex)
    }
    // set original index metadata generator as @data variable
    opts.data.originalIndex = function() {
        return originalIndex.shift()
    }
    // default each
    return handlebars.helpers.each(originalData, opts)
})

把手：在保持原始排序索引的同时对列表进行排序

Demo

1 个答案: