ループの前にオブジェクトキーを並べ替えます。ハンドルバー

Question

Handlebarsテンプレートに渡す際に、デフォルトのソートを反復するオブジェクトがありますが、デフォルトの方法ではなく特定の方法でソートします。

Demo

<div id="some-stuff"></div> 

<script id="some-template" type="text/x-handlebars-template"> 
    <ul> 
    {{#test this}}{{/test}} 
    </ul> 
</script> 

ヘルパー

Handlebars.registerHelper('test', function(obj, options) { 
    var sortIn = ['red', 'green', 'blue', 'yellow']; 
    var rt = ''; 

    sortIn.forEach(function(entry) { 
    for (var i = 0; i < obj[entry].length; i++) { 
     rt += '<li><span>' + obj[entry][i] + '</span></li>'; 
    } 
    }); 

    return rt; 
}); 

var source = $("#some-template").html(); 
var template = Handlebars.compile(source); 

var data = { // want output as red, green, blue and yellow 
    'yellow': ['Yellow', 1, 2, 3, 4, 5], 
    'green': ['Green', 1, 2, 3, 4, 5], 
    'blue': ['Blue', 1, 2, 3, 4, 5], 
    'red': ['Red', 1, 2, 3, 4, 5] 
}; 

var html = template(data); 
$("#some-stuff").html(html); 

しかし、いくつかの理由で、私はこれで満足していない、最後に、それは誰が私です - ：私はこれを試した方法は次のようですループして要素をテンプレートに渡しています。 #eachを使用してヘルパーなしでsortInの順序でこれをデフォルトでループするにはどうすればよいですか。この質問に多少似

からSort object keys with Handlebarsあなたのケースで

Answer 1

、私は自分の価値観を含み、テンプレートにそれを渡すオブジェクトの配列にデータを変換する検討する：

var data = [ 
    { color: 'Yellow', seq: [1,2,3,4,5] }, 
    { color: 'Red', seq: [6,7,8,9,10] }, 
    // ... 
]; 

することができます配列を並べ替えてからテンプレートに渡してから、2つの要素 'colorのプロパティを比較するカスタム.sort()関数を提供します。