Iterowanie nad podstawową pętlą "for" za pomocą Handlebars.js

Question

Jestem nowym użytkownikiem Handlebars.js i właśnie zacząłem go używać. Większość przykładów opiera się na iteracji nad obiektem. Chciałem wiedzieć, jak używać kierownicy w podstawowej pętli.

Przykład.

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

Jak można to osiągnąć?

Answer 1

Do tego nie ma nic w Handlebars, ale można łatwo dodać własnych pomocników.

Jeśli po prostu chciał zrobić coś n razy następnie:

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

i

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

Jeśli chciałeś cały for(;;) pętlę, to coś takiego:

Handlebars.registerHelper('for', function(from, to, incr, block) { 
    var accum = ''; 
    for(var i = from; i < to; i += incr) 
     accum += block.fn(i); 
    return accum; 
}); 

i

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

Demo: http://jsfiddle.net/ambiguous/WNbrL/

Answer 2

Jeśli lubisz coffeescript

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

i

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

Answer 3

Ten fragment zajmie innego bloku w przypadku n pochodzi wartość jako dynamiczne i zapewniają @index opcjonalna zmienna kontekstowa, zachowa także zewnętrzny kontekst wykonania.

/* 
* 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

Najlepsza odpowiedź tutaj jest dobra, jeśli chcesz używać ostatni/pierwszy/indeks chociaż można użyć następujących

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

i

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