Блог

Главная - Вопросы по программированию - Привязка глобальной переменной к представлению в Ember

Привязка глобальной переменной к представлению в Ember

#data-binding #ember.js

#привязка данных #ember.js

Вопрос:

Мое приложение Ember является многоязычным, и язык может меняться на каждой странице (например, в банкомате или в музее), и я хотел бы добавить класс к <header> элементу, чтобы задать правильный язык.

Я меняю активную локаль, меняя I18n.locale = "en"; маршрутизатор, но, похоже, не могу обновить класс в элементе. Я попытался создать пользовательский компонент заголовка следующим образом:

 Ember.LocalizedHeader = Ember.View.extend({
  tagName: "header",
  classNameBindings: ["locale"],
  locale: function() {
    return I18n.locale;
  }.property()
});

Это работает, но не обновляет значение при изменении локали.

Как мне сообщить Ember: «посмотрите это значение и соответствующим образом обновите класс»?

Спасибо!

Ответ №1:

Создайте глобальную настройку и следите за ней. Верхний регистр обычно обозначает пространство имен, которое находится на глобальном уровне ( App ).

 App.globalSetting = Ember.Object.create({
  language:'foo'
});

App.IndexView = Em.View.extend({
  language: function(){
    return App.globalSetting.get('language');
  }.property('App.globalSetting.language')
});

А затем вы можете использовать установщик для обновления свойства из любого места App.globalSetting.set('language', 'bar')

Пример: http://jsbin.com/gubefumo/1/edit

Вы также можете сделать это с помощью POJOs, вам просто нужно использовать Ember.get и Ember.set убедиться, что изменения запускаются и извлекаются должным образом.

 App.globalSetting = {
  language:'foo' 
};


App.IndexView = Em.View.extend({
  language: function(){
    return Em.get(App.globalSetting,'language');
  }.property('App.globalSetting.language')
});

Em.run.later(function(){
  Em.set(App.globalSetting,'language', 'bar');
}, 2000);

Пример: http://jsbin.com/gubefumo/2/edit