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=?=

來源

2014-12-25 Ka Fai Lo

如果您希望重複使用默認的幫助器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幫手。

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) 
})

：因爲它是可以使用的功能 @data變量，可以將 @originalIndex數據變量作爲發電機將通過各一個，它被稱爲時間返回原指標的排序順序一個註冊

來源

2014-12-25 09:04:56 famousgarkin

把手：排序列表，同時保持原來的排序索引

Demo

回答

相關問題