handlebars.js - 如何在 Handlebars 循环中使用 {{this}} 访问数组内容？

Question

我目前正在使用 Handlebars动态填充一些面板。其中一个，我觉得有必要重复给定的任务。

// Add a looping helper for Handlebars
Handlebars.registerHelper('repeat', function(nFrom, nTo, oBlock) {
    var sResult = '';
    for (var i=nFrom; i < nTo+1; i++)
        sResult += oBlock.fn(i);
    return sResult;
});

{{#if oSomeObject}}
<ul>
    {{# repeat 1 2}}
    <li>{{../oSomeObject.aSomeProperty[{{this}}]</li>  <!-- Does not work (because of nested curlies) -->
    <li>{{../oSomeObject.aSomeProperty[this]}}</li>  <!-- Does not work -->
    {{/repeat}}
</ul>
{{/if}}

有什么已知的方法可以让我访问我的 repeat block 中的数组内容吗？

Answer 1

我会这样做:

Handlebars.registerHelper('myHelper', function(object, nFrom, nTo, oBlock){
    var sResult = '';
    for(var i=nFrom; i<nTo+1; i++)
        sResult += oBlock.fn(object[i]);
    return sResult;
});

或者，如果您想遍历 所有 oSomeObject 的

Handlebars.registerHelper('myHelper', function(object, oBlock){
    var sResult = '';
    for(var i=0; i<object.length; i++)
        sResult += oBlock.fn(object[i]);
    return sResult;
});

然后你可以调用它:

{{#myHelper oSomeObject}}
    <li>{{aSomeProperty}}</li>
{{/myHelper}}

这实际上与 handlebars 的 each block 助手相同，因此您可以只使用:

{{#each oSomeObject}}
    <li>{{aSomeProperty}}</li>
{{/each}}

source