Добавление смещения к {{@index}} при переходе через элементы в Handlebars

Ответ 1

Handlebars дает вам возможность написать пользовательский помощник, который обрабатывает эту ситуацию, например. вспомогательную функцию, которая позволяет выполнять вычисления на выражениях, таких как сложение и вычитание и т.д.

Ниже функция регистрирует новый помощник, который просто увеличивает значение на 1:

var Handlebars = require('handlebars');

Handlebars.registerHelper("inc", function(value, options)
{
    return parseInt(value) + 1;
});

Затем вы можете использовать его в выражении дескриптора с помощью ключевого слова inc, например:

{{inc @index}}

Ответ 2

Фактический ответ: fooobar.com/questions/136926/...

Зарегистрируйте математический руль и выполните все математические операции.

app.engine('handlebars', exphbs({
  helpers:{
    // Function to do basic mathematical operation in handlebar
    math: function(lvalue, operator, rvalue) {lvalue = parseFloat(lvalue);
        rvalue = parseFloat(rvalue);
        return {
            "+": lvalue + rvalue,
            "-": lvalue - rvalue,
            "*": lvalue * rvalue,
            "/": lvalue / rvalue,
            "%": lvalue % rvalue
        }[operator];
    }
}}));
app.set('view engine', 'handlebars');

Затем вы можете непосредственно выполнить операцию в своем представлении.

    {{#each myArray}}
        <span>{{math @index "+" 1}}</span>
    {{/each}}

Ответ 3

Я считаю, что вы можете использовать...

{{math @index "+" 1}}

Ответ 4

Чтобы развернуть ответ Mobiletainment, это решение позволяет увеличить значение для передачи в качестве аргумента. Если значение не передано, используется значение по умолчанию 1.

Handlebars.registerHelper('inc', function(number, options) {
    if(typeof(number) === 'undefined' || number === null)
        return null;

    // Increment by inc parameter if it exists or just by one
    return number + (options.hash.inc || 1);
});

Внутри шаблона вы можете написать:

{{inc @index inc=2}}

Ответ 5

Я решил эту проблему для себя, добавив короткий тег script в конец моего кода руля!

Добавьте класс туда, где вы вызываете @index, а затем работает следующий код jQuery (также можно использовать с помощью vanilla JS).

<p class="create_index">
     {{@index}}
</p>
<script>
    $(".create_index").text(parseInt($(".create_index").text())+1)
</script>

изменить 4/28 -. Это изменило использование vanilla JS для лучшей обратной совместимости (т.е. IE7, 8):

<span class="create_index"></span>
<script>
    var divs = document.querySelectorAll('.create_index');
    for (var i = 0; i < divs.length; ++i) {
        divs[i].innerHTML = i + 1;
    }
</script>

document.querySelectorAll имеет большую совместимость, но также может быть document.getElementsByClassName("create_index")

Ответ 6

Библиотека handlebars-helpers имеет довольно обширную библиотеку математики в lib/math.js, включая помощник {{add a b}} общего назначения, определенный следующим образом

/**
 * Return the product of a plus b.
 *
 * @param {Number} a
 * @param {Number} b
 * @api public
 */
helpers.add = function(a, b) {
  return a + b;
};

Если вы не хотите копировать и вставлять это в свой проект, и у вас есть возможность использовать npm, вы можете получить эту зависимость следующим образом:

npm install handlebars-helpers --save

Затем вы можете зарегистрировать математические помощники следующим образом:

const handlebars = require('handlebars'),
  handlebarsHelpers = require('handlebars-helpers');

handlebarsHelpers.math({
  handlebars: handlebars
});

Ответ 7

Кидаю мое решение сюда. Счетчики CSS.

body {
  counter-reset: section;                     /* Set a counter named 'section', and its initial value is 0. */
}

h3::before {
  counter-increment: section;                 /* Increment the value of section counter by 1 */
  content: counter(section);                  /* Display the value of section counter */
}

Я застрял на этом, и это было более приятное решение по сравнению с добавлением нового помощника.

Ответ 8

Я использовал nodejs и express-handlebars в качестве движка шаблонов и столкнулся с той же проблемой. И вот как мне удалось решить.

Вы можете создать папку и файл js внутри нее, где вы можете создать свои собственные пользовательские помощники, которые будут брать индекс и возвращать его с шагом 1.

module.exports = {
    formatIndex: function(index)  {
        return index+1;
    }
}

Не забудьте зарегистрировать помощника в вашем приложении (в моем случае app.js). Я использовал экспресс-руль, поэтому я зарегистрировал помощника следующим образом:

app.engine('handlebars', exphbs({defaultLayout: 'home', helpers: { formatIndex }}));

Примечание: вы должны импортировать formatIndex перед регистрацией.

Тогда вы можете использовать его в своем представлении как:

{{#each assignments}}
     <div>{{formatIndex @index }}</div>
{{/if}}