2017-08-08 43 views
0

現在,我不是指爲他們的孩子傳遞不同背景的幫助者。不,我的意思是幫助者修改他們作爲副作用傳遞的上下文。Handlebars助手是否允許編輯其上下文?

例和用例:

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

順便說一句,你不修改上下文,你改變它。突變通常不會阻止,我認爲使用它並沒有問題,而突變本身通常不是一種好的做法。 –

回答

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();'創建一個新的數組 –

相關問題