X

Handlebars: IfEq, IfNotEq, Switch

Столкнулся с необходимостью использовать простые шаблоны в одном из проектов. В качестве шаблонизатора был выбран Handlebars (handlebarsjs.com). К сожалению, в нем нет некоторых нужных мне операторов, поэтому решено было расширить функционал парой не хитрых, но очень полезных хелперов..

ifEq = Проверяет соответствие переменной строке

Handlebars.registerHelper('ifEq', function (a, b, options) {
    if (a == b) { return options.fn(this); }
    return options.inverse(this);
});

Пример использования

{{#ifEq greatings "Hello world"}}
    Hello world
{{/ifEq}}

ifNotEq = Проверяет на НЕ соответствие переменной строке

Handlebars.registerHelper('ifEq', function (a, b, options) {
    if (a != b) { return options.fn(this); }
    return options.inverse(this);
});

Пример использования

{{#ifNotEq greatings "Hello world"}}
    NOT Hello world
{{/ifNotEq}}

Switch = Заменитель конструкции switch

Handlebars.registerHelper("switch", function(value, options) {
    this._switch_value = value;
    this._switch_break = false;
    var html = options.fn(this); // Process the body of the switch block
    delete this._switch_value;
    return html;
});

Handlebars.registerHelper("case", function(value, options) {
    if (value == this._switch_value) {
        this._switch_break = true;
    return options.fn(this);
    }
});

Handlebars.registerHelper("caseList", function(value, options) {
    if (value.split(',').map(str=>str.trim()).indexOf(this._switch_value) > -1) {
        this._switch_break = true;
    return options.fn(this);
    }
});

Handlebars.registerHelper('caseDefault', function(value, options) {
    if (this._switch_break == false) {
        return value.fn(this);
    }
});

Пример использования. Обратите внимание, что при необходимости использовать caseDefault, он должен быть объявлен последним

{{#switch name}}
    {{#case 'John'}}
        Male
    {{/case}}
    {{#caseList 'Lena, Katya'}}
        Female
    {{/caseList}}
    {{#caseDefault}}
        Unrecognized
    {{/caseDefault}}
{{/switch}}

Категории: JavaScript
Тэги: handlebarsjavascriptjs