把手获取循环索引

Question

我有一个用 backbone 和车把编写的助手，我需要获取内部 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 到您的模板中：

Block helpers can also inject private variables into their child templates. This can be useful to add extra information that is not in the original context data.

For example, when iterating over a list, you may provide the current index as a private variable.

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

把手获取循环索引

handlebars get index for loop

backbone.js

handlebars.js

handlebarshelper