Хелпер для локальных переменных
Нужен, чтобы записывать результаты вызова других хелперов и использовать их дальше внутри текущего шаблона.
Рассмотрим его работу на двух примерах.
Пример 1
Допустим, пользователь заказал манго, арбуз и дыню. Количество и цены всего заказанного попали в переменные в таком виде:
{ "mangoPrice": 300, "mangoCount": 5, "watermelonPrice": 20, "watermelonCount": 30, "melonPrice": 50, "melonCount": 8 }
Количество заказанных манго записалось в переменную mangoCount, цена — в mangoPrice.
Вес арбуза в кг записался в переменную watermelonCount, цена арбуза за кг — в watermelonPrice.
Вес дыни в кг записался в переменную melonCount, цена дыни за кг — в melonPrice.
Используем хелпер multiply, чтобы умножить количество товара на его цену:
{{multiply mangoCount mangoPrice}}
Сделаем так для всех товаров:
{{multiply watermelonCount watermelonPrice}} {{multiply melonCount melonPrice}}
Чтобы каждый раз не писать эти вычисления, с помощью хелпера var записываем их в локальные переменные, а потом используем в нескольких местах, где они нужны.
Для манго запишем вычисления в mangoTotal.
Для арбуза — в watermelonTotal.
Для дыни — в melonTotal.
Все вместе будет выглядеть так:
{{#vars}} {{var "mangoTotal" (multiply mangoCount mangoPrice)}} {{var "watermelonTotal" (multiply watermelonCount watermelonPrice)}} {{var "melonTotal" (multiply melonCount melonPrice)}}
Теперь, используя хелпер {{#vars}} с записанными в него данными, можно делать вычисления и не прописывать одни и те же данные каждый раз:
Манго: {{mangoCount}}шт. {{@vars.mangoTotal}} ₽ Арбуз: {{watermelonCount}}кг. {{@vars.watermelonTotal}} ₽ Дыня: {{melonCount}}кг. {{@vars.melonTotal}} ₽
Это особенно удобно, если вычислений много.
Теперь вычислим общую сумму заказанных товаров используя хелпер var, с записанными данными.
{{add (add @vars.mangoTotal@vars.watermelonTotal) @vars.melonTotal}} {{/vars}}
Переменным можно давать любые имена и записывать в них любые вычисления.
Этот пример можно протестировать в песочнице →
Пример 2
Допустим, пользователь опять заказал манго, арбуз и дыню. Но количество и цены всего заказанного попали в переменные в виде немного другого списка:
{ { "products": [ { "id": "1024", "title": "Манго", "count": 5, "price": 300 }, { "id": "2048", "title": "Арбуз", "count": 30, "price": 20 }, { "id": "2048", "title": "Дыня", "count": 8, "price": 50 } ] }
Рассмотрим поэтапно все действия для вычислений.
Переменные можно использовать только внутри блока {{#vars}}.
1. Запишем с помощью хелпера var в переменную tolal — ноль, т.к туда еще не записалось ни одного товара:
{{var "total" 0}}
2. Перебираем список товаров с помощью хелпера each:
{{#each products}}
С помощью each заходим внутрь списка, чтобы можно было работать с переменными, как с обычными переменными, которые не внутри списка.
Теперь:
- title — название товара;
- count — количество;
- price — цена за единицу.
Внутри each умножим переменную с ценой на переменную с количеством:
{{multiply count price}}
Запишем это в новую переменную subtotal, которую мы создадим с помощью var:
{{var "subtotal" (multiply count price)}}
Теперь в subtotal — результат умножения цены на количество.
3. Выводим нумерованный список товаров с подитогом.
Нумерованный список можно сделать с помощью @index — специальной переменной, в которую записан текущий номер элемента списка.
Так как списки нумеруются от нуля, прибавляем к нему единицу add @index 1.
И выводим ранее записанную переменную, в которой у нас уже готов результат умножения цены на количество:
{{@vars.subtotal}} {{add @index 1}}. {{title}} — {{price}} ₽ / {{count}} шт. — {{@vars.subtotal}} ₽
Где:
- {{add @index 1}} — выведется как порядковый номер заказа. В данном случае это 1,2,3;
- {{title}} — выведется как название товара. В нашем примере это манго, арбуз, дыня;
- {{price}} — цена 1 штуки одной позиции;
- {{count}} — количество заказанного товара;
- {{@vars.subtotal}} ₽ — цена за заказанное количество одной позиции товара (количество умноженное на цену).
Хелпер each выполняется для каждой записи в списке, поэтому в результате выведется весь список. В нашем случае, в результате выведется три заказанных товара:
- Манго — 300 ₽ / 5 шт. — 1500 ₽
- Арбуз — 20 ₽ / 30 шт. — 600 ₽
- Дыня — 50 ₽ / 8 шт. — 400 ₽
4. Теперь сложим подитог с общим итогом. Для этого перезапишем переменную total.
Подытог записывается столько раз, сколько элементов в списке. Подытог каждый раз мы записываем в одну и ту же переменную — tolal.
С каждым новым элементом в списке, то есть с новым товаром, в toltal перезаписывается новая сумма, но уже с учетом нового товара. В нашем списке три элемента, поэтому подытог перезаписывается три раза.
Перед закрытием each в total записалась общая сумма покупок, которую можно выводить с помощью {{@vars.total}}. В нашем случае это 2500 ₽.
Итого: {{@vars.total}} ₽ → Итого: 2500 ₽
Не забудем закрыть {{/vars}}.