使用Handlebars.js迭代基本的"for"循环

Question

我是Handlebars.js的新手,刚刚开始使用它.大多数示例都基于迭代对象.我想知道如何在基本的循环中使用把手.

例.

for(i=0 ; i<100 ; i++) {
   create li's with i as the value
}

怎么能实现这一目标？

Answer 1

Handlebars中没有任何内容,但您可以轻松添加自己的帮助程序.

如果你只想做一些事情n,那么:

Handlebars.registerHelper('times', function(n, block) {
    var accum = '';
    for(var i = 0; i < n; ++i)
        accum += block.fn(i);
    return accum;
});

和

{{#times 10}}
    <span>{{this}}</span>
{{/times}}

如果你想要一个完整的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;
});

和

{{#for 0 10 2}}
    <span>{{this}}</span>
{{/for}}

演示:http://jsfiddle.net/ambiguous/WNbrL/

Answer 2

如果您想使用last/first/index,那么这里的最佳答案是好的,尽管您可以使用以下内容

Handlebars.registerHelper('times', function(n, block) {
    var accum = '';
    for(var i = 0; i < n; ++i) {
        block.data.index = i;
        block.data.first = i === 0;
        block.data.last = i === (n - 1);
        accum += block.fn(this);
    }
    return accum;
});

和

{{#times 10}}
    <span> {{@first}} {{@index}} {{@last}}</span>
{{/times}}

Answer 3

如果你喜欢CoffeeScript

Handlebars.registerHelper "times", (n, block) ->
  (block.fn(i) for i in [0...n]).join("")

和

{{#times 10}}
  <span>{{this}}</span>
{{/times}}

Answer 4

晚了几年，但现在eachHandlebars 中提供了它，它允许您轻松地迭代一系列项目。

https://handlebarsjs.com/guide/builtin-helpers.html#each

Answer 5

这个片段将处理else块,以防n作为动态值,并提供@index可选的上下文变量,它将保持执行的外部上下文.

/*
* Repeat given markup with given times
* provides @index for the repeated iteraction
*/
Handlebars.registerHelper("repeat", function (times, opts) {
    var out = "";
    var i;
    var data = {};

    if ( times ) {
        for ( i = 0; i < times; i += 1 ) {
            data.index = i;
            out += opts.fn(this, {
                data: data
            });
        }
    } else {

        out = opts.inverse(this);
    }

    return out;
});