CODEWITHSUNDEEP
data-bindingember.js
Cimm
Cimm

Reputation: 4775

Binding a global variable to a view in Ember

My Ember app is multilingual and the language can change on every page (think ATM or museum display) and I would like to add a class to the <header> element to set the correct language.

I change the active locale by changing I18n.locale = "en"; in the router but can't seem to update the class on the element. I tried creating a custom header component like this:

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

This works but doesn't update the value when the locale changes.

How do I tell Ember: "watch this value and update the class accordingly"?

Thanks!

Upvotes: 1

Views: 570

Answers (1)

Kingpin2k
Kingpin2k

Reputation: 47367

Create a global setting, and watch that. Uppercase generally denotes namespace that lives at the global level (App).

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

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

And then you can use the setter to update the property from anywhere App.globalSetting.set('language', 'bar')

Example: http://jsbin.com/gubefumo/1/edit

You can also do this with POJOs, you just need to use Ember.get and Ember.set to make sure the changes are triggered and retrieved properly.

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);

Example: http://jsbin.com/gubefumo/2/edit

Upvotes: 1

Related Questions