Как оценить внутри выражения Handlebars?

У меня есть модель магистрали, возвращающая что-то вроде этого:

{
    language: "us",
    us: {
        title: "Gigs",
        subtitle: "Stay tune to my upcoming gigs"
    },
    br: {
        title: "Shows",
        subtitle: "Fique ligado na minha agenda"
    }
}

language обновляется динамически, поэтому он будет определять, какой объект я буду печатать, используя Handlebars. Обычно я бы сделал:

<h1>{{title}}</h1>
<h2>{{subtitle}}</h2>

Но мне нужно сделать какой-то конкат:

<h1>{{language.title}}</h1>
<h2>{{language.subtitle}}</h2>

Конечно, это не сработает. Это мой вопрос: как я могу сделать выражение динамически согласованным?

Так что если язык "us"он вызывает:

<h1>{{us.language.title}}</h1>
<h2>{{us.language.subtitle}}</h2>

И если это "br"он вызывает:

<h1>{{br.language.title}}</h1>
<h2>{{br.language.subtitle}}</h2>

3 ответа

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

model.currentLanguage = () => model[model.language]

Тогда вы можете использовать его в своих взглядах

<h1>{{currentLanguage().title}}</h1>
<h2>{{currentLanguage().subtitle}}</h2>

При рендеринге просто используйте данные нужного языка в качестве контекста шаблона.

this.template(this.model.get(this.model.get('language')));

Вы также можете сделать функцию в модели, в отличие от того, что упомянул Джордж, а не непосредственно в контексте.

var LanguageModel = Backbone.Model.extend({
    /**
     * Get the translated data for the currently set language.
     * @param  {string} [lang] optional language string to override the default one
     * @return {Object} the language translation object.
     */
    getLanguageData: function(lang) {
        return this.get(lang || this.get('language'));
    },
    //...
});

И теперь вам нужно только вызвать эту функцию, чтобы получить нужный объект.

this.template(this.model.getLanguageData());

И в вашем шаблоне нет различия:

<h1>{{title}}</h1>
<h2>{{subtitle}}</h2>

Попробуйте использовать with помощник в Handlebars вместе с функцией, предложенной @George Mauer, или локальной функцией при передаче параметров в шаблоне

Предположим, у нас есть функция, возвращающая текущий язык

var lang = model[String(model.language)]; // or this, depending on where your model lives

Вы бы передать lang переменная в вашем шаблоне (в зависимости от того, как вы реализуете шаблоны Handlebars в своем приложении, существует множество способов)

в вашем шаблоне у вас будет

{{#with lang}}
  <h1>{{title}}</h1>
  <h2>{{subtitle}}</h2>
{{/with}}
Другие вопросы по тегам