backbone.js - Handlebars 获取循环索引

Question

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

这是我的 helper

 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.

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