2017-08-08 5 views
0

今、私は、彼らの子供たちに異なる文脈を渡すブロックヘルパーを意味するものではありません。いいえ、私はむしろ、彼らが副作用として渡された文脈を変更するヘルパーを意味します。ハンドルバーヘルパーはコンテキストを編集できますか?

例とユースケースは:

Handlebars.registerHelper('sortByFoo', function(elts) { 
 
    elts.sort((elt1, elt2) => elt1.foo.localeCompare(elt2.foo)); 
 
    return ""; 
 
}) 
 

 
Handlebars.registerHelper('sortByBar', function(elts) { 
 
    elts.sort((elt1, elt2) => (elt1.bar - elt2.bar)); 
 
    return ""; 
 
}) 
 

 
var context = {elements: [ 
 
    {foo: 'asdf', bar: 5}, 
 
    {foo: 'jkl', bar: 4} 
 
]} 
 

 
var source = document.getElementById('template').innerHTML; 
 
var template = Handlebars.compile(source); 
 

 
document.getElementById('result').innerHTML = template(context);
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.10/handlebars.js"></script> 
 
<script id="template" type="text/x-handlebars-template"> 
 
    {{sortByFoo elements}} 
 
    <h2>Elements sorted by Foo:</h2> 
 
    <ul> 
 
     {{#each elements}} 
 
    \t   <li>{{foo}}, {{bar}}</li> 
 
     {{/each}} 
 
    </ul> 
 
    {{sortByBar elements}} 
 
    <h2>Elements sorted by Bar:</h2> 
 
    <ul> 
 
     {{#each elements}} 
 
    \t   <li>{{foo}}, {{bar}}</li> 
 
     {{/each}} 
 
    </ul> 
 
</script> 
 

 
<div id="result"></div>

もののこの種は、ハンドルバー上で許可されていますか?このスニペットではうまくいくようですが、... Handlebarsのドキュメントは、子要素に異なるコンテキストを渡すさまざまな方法について長い間説明していますが、ヘルパーが独自のコンテキストを変更することは何も言わないので、私がやっているのは、おそらくハンドルバーの意図された使い方ではなく、もしうまくいけば、それは偶然だけです。そして、私がすぐに差し迫ったトラブルに遭遇したくなければ、やめなければなりません。

ハンドルバーにはこのようなものがありますか?

+1

それが許可されています確かに。そのちょうどjavascriptを使用して - あなたは何でもしたいことができます。より良い方法がありますか?多分。リストをソートしてそれぞれをレンダリングするヘルパーを持たないのはなぜですか? –

+0

@realseanp 'each'のヘルパーから返されたリストをどのように参照しますか? – gaazkam

+0

btw、コンテキストを変更していない、それを突然変異させる。普段は予防されていない突然変異は使用しても問題ありませんが、突然変異そのものは良いことではありません。 –

答えて

1

これは機能する場合があります。私はちょうど各ヘルパーをhbsを取ったが、ヘルパーで持っているソート機能を追加した。

Handlebars.registerHelper('eachSorted', function(context, options) { 
    var ret = ""; 
    var arr = context.slice(); 
    arr.sort((elt1, elt2) => elt1.foo.localeCompare(elt2.foo)); 

    for(var i = 0; i < arr.length; i++) { 
    ret = ret + options.fn(arr[i]); 
    } 

    return ret; 
}); 

その後

{{#eachSorted elements}} 
     <li>{{foo}}, {{bar}}</li> 
    {{/each}} 
+0

'arr.sort'は配列を並べ替えるので、問題は私のスニペットとどう違うのですか? – gaazkam

+1

'var arr = context.slice();'は新しい配列を作成します –

関連する問題