Question

我有一个用骨干和把手编写的助手，我需要获取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循环的索引？

Answer 1

您希望inject private variables进入模板：

块帮助程序还可以将私有变量注入其子级   模板。这对于添加不在其中的额外信息非常有用   原始的背景数据。

例如，在遍历列表时，您可以提供当前值   index作为私有变量。

您只需在传递给块函数的选项中提供数据条目（并确保子数据对象与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;
});

和演示

＆＃13;

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]
}));

＆＃13;

.edit-column {padding-left: 10px}

＆＃13;

<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>

＆＃13;

把手获得循环索引

1 个答案: