Использование встроенных партиалов и декораторов с Handlebars 4.0

context

Это родительский контекст вашего шаблона, который включает в себя любые аргументы Decorator, а также данные, которые были переданы в функцию программы.

Форматирование денег в руле Pre-4.0

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

Сначала мы создаем помощника для форматирования денег. Помощник примет значение для форматирования и валюту в качестве аргументов:

 //someFile.js
Handlebars.registerHelper('formatMoneyHelper', function(value, currency) {
    switch(currency) {
        case 'USD':
            return new Handlebars.safeString('$' + value + 'USD');
        case 'EUR':
            return new Handlebars.safeString('€' + value + 'EUR');
    }
});

Теперь мы можем использовать этот помощник в шаблоне.

 //template.hbs

Starting amount: {{formatMoneyHelper this.start this.format}}
Ending amount: {{formatMoneyHelper this.end this.format}}
Profit/Loss: {{formatMoneyHelper this.net this.format}}

Мы ожидаем, что наши данные будут в следующем формате:

 {
    start: 12.30,
    end: 15.30,
    net: 3.00,
    format: 'USD'
}

Это не плохой способ решить это. Помощники предназначены для такого рода проблем, но в шаблоне и помощнике написано много избыточного кода. Мы могли бы сделать больше оптимизаций с этим, но давайте рассмотрим способ выполнения этой задачи, используя вместо этого декораторы в Handlebars 4.0.

Форматирование денег с помощью декораторов в руле 4.0

Лучший способ отформатировать деньги - это иметь более простого помощника, который просто берет значение. Он должен уже понимать, в какой валюте должны быть отформатированы деньги. Динамически это сделать было бы непросто с помощниками, поэтому давайте воспользуемся декораторами, чтобы найти более простое решение.

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

 function formatUSD(value) {
    return new Handlebars.safeString('$' + value + 'USD');
}

function formatEUR(value) {
    return new Handlebars.safeString('€' + value + 'EUR');
}

Handlebars.registerDecorator('activateFormatter', function(program, props, container, context) {
    var moneyHelper,
        format = context.args[0] || context.data.root.format;

    switch(format) {
        case "USD":
            moneyHelper = formatUSD;
            break;
        case "EUR":
            moneyHelper = formatEUR;
            break;
        default:
            console.log('Money format not set. Please set before rendering template.');
            moneyHelper = function() {};
    }

    container.helpers = {
        formatMoneyHelper: moneyHelper
    };
});

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

Далее давайте посмотрим, как мы можем использовать этот декоратор в нашем шаблоне:

 //template.hbs

{{* activateFormatter}}

Starting amount: {{formatMoneyHelper this.start}}
Ending amount: {{formatMoneyHelper this.end}}
Profit/Loss: {{formatMoneyHelper this.net}}

Это будет использовать свойство format в нашем объекте контекста, чтобы установить функцию formatUSD в качестве нашей вспомогательной функции formatMoneyHelper. Мы также можем переопределить его, используя этот синтаксис:

 {{* activateFormatter "EUR"}}

Реализация с использованием Decorators более элегантна, тестируема и позволяет вам контролировать форматирование текущего блока внутри вашего шаблона.

Декораторы невероятно мощные, и приведенный выше пример - просто взгляд на то, что можно сделать.

Выводы

Надеемся, что эта статья вдохновила вас использовать Inline Partials и Decorators в ваших собственных проектах, использующих Handlebars. Вы видели, как встроенные партиалы полезны для определения партиалов в вашем шаблоне и уменьшения количества накладных расходов JavaScript для регистрации партиалов. Более того, вы видели, что они идеально подходят для небольших повторяющихся фрагментов разметки. С другой стороны, декораторы позволяют вам изменять существующую функцию блочной программы Handlebars и дают вам контроль над временем выполнения Handlebars перед выполнением. Они идеально подходят, чтобы связываться с контекстными данными или помощниками.

Поэтому Inline Partials и Decorators являются мощным дополнением к уже существенному инструменту для фронт-энда разработки.

А теперь иди и укрась свои шаблоны руля с Inline Partials!