Durchlaufen der grundlegenden "for" -Schleife mit Handlebars.js

Ich bin neu bei Handlebars.js und habe gerade angefangen, es zu verwenden. Die meisten Beispiele basieren auf der Iteration über ein Objekt. Ich wollte wissen, wie man Lenker in Basic for Loop verwendet.

Beispiel.

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

Wie kann dies erreicht werden?

Es gibt nichts im Lenker dafür, aber Sie können Ihre eigenen Helfer einfach genug hinzufügen.

Wenn Sie nur mal etwas machen wollten, ndann:

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

und

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

Wenn Sie eine ganze for(;;)Schleife wollten , dann so etwas:

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

und

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

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

Die beste Antwort hier ist gut, wenn Sie last / first / index verwenden möchten, obwohl Sie Folgendes verwenden könnten

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

und

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

Wenn Sie CoffeeScript mögen

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

und

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

Dieses Snippet kümmert sich um den else-Block, falls er nals dynamischer Wert vorliegt, und stellt eine @indexoptionale Kontextvariable bereit . Es behält auch den äußeren Kontext der Ausführung bei.

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

Ein paar Jahre zu spät, aber es gibt jetzt eachLenker, mit denen Sie ganz einfach über eine Reihe von Elementen iterieren können.

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