Ember Dynamic Classes
In Ember, your state is separated from the UI inside models. But, often you want the state of your models to be represented visually in the UI via dynamic class names. Make it happen with
Use an Ember.View
A view will function as the translation layer between the state of your models and the DOM. It will provide the logic to observe the properties within your model and expose it as a class name on the associated DOM element.
If I have a model with state:
App.MyModel = App.Model.extend hasSomeState: true
Based on that state, I want to add a
has-some-state class to the UI if it’s true, and remove the class if it’s false. The view might look like:
App.MyModelView = Ember.View.extend # ... classNameBindings: ['hasSomeState'] hasSomeState: (-> @get('content').get('hasSomeState') ).property('content.hasSomeState')
hasSomeState function will return a boolean has to whether or not the
has-some-state class should be added to the element.
Bind to Model Properties
Now use the view in the template, being careful to match the binding of
content so the property watching works. Here in
In the example, make sure
myModelInstance is available in the scope of your route/controller.
As your model’s
hasSomeState value is changed internally with the
@set function, the view will be notified that it needs to re-run the
hasSomeState function, and the UI will update if needed.
What other methods do you utilize in Ember to get dynamic classes?