使用 Handlebars.js 遍历基本的“for”循环答案

【问题标题】：Iterating over basic “for” loop using Handlebars.js使用 Handlebars.js 遍历基本的“for”循环
【发布时间】：2012-08-09 02:25:13
【问题描述】：

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

示例。

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

如何做到这一点？

【问题讨论】：

标签： handlebars.js

【解决方案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/

【讨论】：

帮助者+1。作为旁注，嵌套 for 帮助器在您需要参考初始数据的情况下不起作用。即数据：{行：12，列：3}。
在嵌套的{{#times}} 块内打印{{../this}} 时，我注意到有时它会是[Object object] 而不是实际数字（每个嵌套循环一次）。
@dude 你有一个可运行的例子吗？我已经有几年没碰过把手了。
在循环内部，我无法从车把检索数据，你们有什么想法吗？
@HungDQ 抱歉，我不知道您要做什么，请尝试提出一个包含所有必要详细信息的新问题。

【解决方案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}}

【讨论】：

这个助手似乎不允许在嵌套使用助手时使用@../index 或@../last。这是对的还是我做错了什么？

【解决方案3】：

如果你喜欢 CoffeeScript

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

和

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

【讨论】：

【解决方案4】：

如果n作为动态值，这个sn-p会处理else块，并提供@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;
});

【讨论】：

我更喜欢这种方法，因为您手头有 @index 变量。您还可以根据具体需要轻松添加其他变量。

【解决方案5】：

迟了几年，但现在在 Handlebars 中提供了 each，它允许您非常轻松地迭代一系列项目。

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

【讨论】：