使用Handlebars.js迭代基本「for」循環

Question

我是Handlebars.js的新手，剛開始使用它。大多數例子都是基於迭代一個對象的。我想知道如何在基本for循環中使用handlebars。

例子。

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

如果你喜歡的CoffeeScript

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

和

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

Answer 3

這個片段會照顧別人塊的情況下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; 
}); 

Answer 4

頂部的回答是不錯的，如果你想用最後/第一/指數雖然你可以使用下面的

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