Question

我想创建一个像{{#each}}一样工作的把手助手，但是我可以指定一个数字，以便每个n次迭代运行一些额外的代码。

我需要这个的原因是我需要在三个项目的行中吐出内容，所以每三个项目我需要打开并关闭一个新的容器div。

当然我可以简单地让主机将数组格式化为三个项目的包，并使用{{#each}}进行迭代，但我认为创建一个帮助器会更优雅，所以我可以说像

{{#each_pack data 3}}
  <div class="container">
  {{#each pack_items}}
    <span>{{content}}</span>
  {{/each}}
  </div>
{{/each_pack}}

我不完全确定如何做到这一点。如何使pack_items可用于内部块？

Answer 1

我解决了这个问题，让我使用我刚才提出的完全相同的语法。这是代码：

window.Handlebars.registerHelper('each_pack', function(context, packsize, fn){
    var ret = '';

    /*
        Function that creates packages of size 
        packsize from a given array
    */
    var packagify = function(array, packsize){
        var i = 0;
        var length = array.length;

        var returnArray = [];
        var pack = [];
        while(i < length){
            /*
                If this is not the first entry,
                if this is the packsize-d entry
                or this is the last entry,
                push the pack to the return array
                and create a new one
            */

            if(((i % packsize) == 0 && i != 0) || (i == (length - 1))){
                returnArray.push(pack);
                pack = [];
            }
            pack.push(array[i]);
            i++;
        }
        return returnArray;
    }

    var packArray = packagify(context,packsize);

    for(var i = 0; i < packArray.length; i++){
        var pack = packArray[i];

        this['pack_items'] = pack;
        ret = ret + fn(this);
    }

    delete this['pack_items'];
    return ret;
});

迭代包中的数组

1 个答案: