web-dev-qa-db-fra.com

Itération sur la boucle «for» de base à l'aide de Handlebars.js

Je suis nouveau sur Handlebars.js et je viens de commencer à l’utiliser. La plupart des exemples sont basés sur l'itération sur un objet. Je voulais savoir comment utiliser le guidon en base pour la boucle.

Exemple.

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

Comment cela peut il etre accompli?

handlebars.js
73
user1184100

Il n’ya rien dans le guidon pour cela, mais vous pouvez ajouter vos propres assistants assez facilement.

Si vous vouliez juste faire quelque chose n fois, alors:

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

et

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

Si vous vouliez une boucle entière for(;;), alors quelque chose comme ceci:

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

et

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

Démo: http://jsfiddle.net/ambiguous/WNbrL/

166
mu is too short

La meilleure réponse est bonne, si vous voulez utiliser last/first/index bien que vous puissiez utiliser ce qui suit

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

et

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

Si vous aimez CoffeeScript

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

et

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

Ce fragment de code traitera du bloc else au cas où n aurait la valeur dynamique et fournirait @index variable de contexte optionnelle, elle conservera également le contexte externe de l'exécution.

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