2

我有一个用主干和车把编写的助手，我需要获取内部 for 循环的索引。

这是我的帮手

 Handlebars.registerHelper('for', function(from, to, incr, block) {
        var accum = '';
        for(var i = from; i < to; i += incr)
            accum += block.fn(i);
        return accum;
    });

这是我的模板：

{{#each rows}}
    <div class="row">
        {{#for 0 10 1}}
            <div class="edit-column" data-id="{{@index}}">
            </div>
        {{/for}}
    </div>
{{/each}}

我想{{@index}}打印for循环的索引，现在它打印{{#each rows}}循环的计数器

如何获取 for 循环的索引？

4

1 回答 1

2

您正在寻找将私有变量注入您的模板：

块助手也可以将私有变量注入到他们的子模板中。这对于添加不在原始上下文数据中的额外信息很有用。

例如，在迭代列表时，您可以将当前索引作为私有变量提供。

您只需在传递给块函数的选项中提供数据条目（并确保子数据对象与 的一致性Handlebars.createFrame）

公开@index密钥的修改助手：

Handlebars.registerHelper('for', function(from, to, incr, block) {
    var data;

    if (block.data) {
        data = Handlebars.createFrame(block.data);
    }

    var accum = '';
    for(var i = from; i < to; i += incr) {
        if (data) {
          data.index = i;
        }
        accum += block.fn(i, {data: data});
    }
    return accum;
});

和一个演示

Handlebars.registerHelper('for', function(from, to, incr, block) {
    var data;

    if (block.data) {
        data = Handlebars.createFrame(block.data);
    }


    var accum = '';
    for(var i = from; i < to; i += incr) {
        if (data) {
          data.index = i;
        }
        accum += block.fn(i, {data: data});
    }
    return accum;
});

var tpl = Handlebars.compile($('#rows').html());
$('body').append(tpl({
    rows: [1, 2]
}));
.edit-column {padding-left: 10px}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js"></script>

<script type='text/template' id='rows'>
{{#each rows}}
    <div class="row">{{@index}}
        {{#for 0 3 1}}
            <div class="edit-column">{{@../index}}:{{@index}}</div>
        {{/for}}
    </div>
{{/each}}
</script>

于 2016-09-30T07:53:30.480 回答