javascript - bootstrap - title tag html

Contador para manillares#each

Question

En Handlebars, digamos que tengo una colección de names ¿cómo puedo hacerlo?

{{#each names}}
{{position}}
{{name}}
{{/each}}

donde {{posición}} es 1 para el primer nombre, 2 para el segundo nombre, etc. ¿Tengo que guardar la posición como una clave en la colección?

Answer 1

Aquí está mi solución preferida. Registre un ayudante que amplíe el contexto para incluir su propiedad de posición automáticamente. Luego solo use su nuevo ayudante de bloque (por ejemplo, #iter) en lugar de #each.

Handlebars.registerHelper(''iter'', function (context, options) {
    var ret = "";

    for (var i = 0, j = context.length; i < j; i++) {
        ret += options.fn($.extend(context[i], {position: i + 1}));
    }

    return ret;
});

Uso:

{{#iter names}}
    {{position}}
    {{name}}
{{/iter}}

adaptado de http://rockycode.com/blog/handlebars-loop-index/

Answer 2

Puede obtener valor solo del índice dentro de la lista.

{{#each list}}
    @index
{{/each}}

Answer 3

Puedes hacer esto con la notación incorporada de Handlebars @index:

{{#each array}}
  {{@index}}: {{this}}
{{/each}}

@index dará el índice (basado en cero) de cada elemento en la matriz dada.

Tenga en cuenta que para las personas que usan Handlebars con el motor de Razor view, debe usar la notación @@ index para evitar errores de compilación.

Para más ayudantes incorporados vea http://handlebarsjs.com/

Answer 4

Si bien no puedes hacer esto con ningún ayudante nativo de Handlebars, puedes crear el tuyo propio. Puede llamar a Handlebars.registerHelper() , pasándole una cadena con el nombre que desea hacer coincidir (posición) y una función que devolvería el conteo de la posición actual. Puede hacer un seguimiento del número de posición en el cierre donde llama a registerHelper . Este es un ejemplo de cómo puede registrar un ayudante llamado position que debería funcionar con su ejemplo de plantilla.

JavaScript:

// Using a self-invoking function just to illustrate the closure
(function() {
    // Start at 1, name this unique to anything in this closure
    var positionCounter = 1;

    Handlebars.registerHelper(''position'', function() {
        return positionCounter++;
    });

    // Compile/render your template here
    // It will use the helper whenever it seems position
})();

Aquí hay un jsFiddle para demostrar: http://jsfiddle.net/willslab/T5uKW/1/

Mientras que los ayudantes están documentados en http://handlebarsjs.com/ , esto me costó un poco de esfuerzo para averiguar cómo usarlos. Gracias por el desafío, y espero que ayude!

Answer 5

solo tienes que usar {{@index}}

ejemplo:

{{#.}}
<li class="order{{@index}}"> counter: {{@index}}</li>
{{/.}}

Answer 6

Handlebars.registerHelper("counter", function (index){
    return index + 1;
});

Uso:

{{#each names}}
    {{counter @index}}
    {{name}}
{{/each}}