车把:在保留原始排序索引的同时对列表进行排序

Handlebars: sorting a list while keeping the original sort index

本文关键字：排序 列表 索引 保留 原始 车把      更新时间：2023-09-26

演示

我想显示一个排序的列表，同时还需要知道原始排序索引（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=?=

如果您希望重用默认的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数据变量注册为生成器，该生成器将在每次调用时按排序顺序逐个返回原始索引：

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)
})
相关文章：