Вопрос по handlebars.js – Перебор базового цикла for с использованием Handlebars.js

71

Я новичок в Handlebars.js и только начал его использовать. Большинство примеров основаны на итерации объекта. Я хотел знать, как использовать руль в основном для цикла.

Пример.

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

Как этого достичь?

Ваш Ответ

4   ответа
7

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

а также

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

но вы можете достаточно легко добавить своих собственных помощников.

Если вы просто хотели что-то сделать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/

@ mu-is-too-short какая-нибудь помощь здесь?stackoverflow.com/questions/28865379/…
+1 за помощников. В качестве дополнительного примечания, вложение для помощника не будет работать в сценариях, когда вам нужно вернуться к исходным данным. т.е. данные: {строки: 12, столбцы: 3}.
При печати{{../this}} внутри вложенного{{#times}} Блок Я заметил, что иногда это будет[Object object] вместо фактического числа (один раз за вложенный цикл).
@sheriffderek Извините, я не знаю, что такое Ember или Ember-CLI.
@ Dude У тебя есть такой пример? Я не трогал руль пару лет.
5

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;
});
Мне больше нравится этот подход, потому что у вас есть переменная @index. Также вы можете легко добавлять другие переменные в зависимости от конкретных потребностей.
14

если вы хотите использовать last / first / index, хотя вы можете использовать следующее

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}}
Этот помощник, по-видимому, не позволяет использовать @ .. / index или @ .. / last при переходе к вложенному использованию Помощника. Это правильно или может я что-то не так сделал?
Я также не мог заставить его работать вложенным.

Похожие вопросы