CODEWITHSUNDEEP
jquerycssember.js
Cereal Killer
Cereal Killer

Reputation: 3414

Change css at runtime in Ember

I have two different templates in my Ember app, for the two different languages that the app supports; so the application template is just:

{{outlet}}

when the app is in english mode, the eng template is rendered in the outlet, viceversa the other language template is rendered instead;

i have two separate css files, one for each language, that change the colors of all elements in the page; i would like to swap this css on the fly when the template changes.

Can you suggest the best way for doing this in Ember?

Upvotes: 2

Views: 326

Answers (1)

RhinoWalrus
RhinoWalrus

Reputation: 3089

You can bind a class to the application view:

App.ApplicationView = Ember.View.extend({
lang:'en',
classNameBindings:['lang'],
classNames:['app']
});

//CSS

.app.en{
color:blue;
    /*all other english styles*/
}

.app.fr{
color:red;
     /*all other french styles*/
}

Upvotes: 4

Related Questions