Search code examples
ember.jsember-dataember-components

How to set the class of an Ember component based data in the model?

I'm trying to setup the class name for the component which based on the data property. I succesfully set data to the template.hbs and I see that component is rendered. But inside the component.js I can't set the classname 

export default Ember.Component.extend({
  tagName: 'li',
  classNameBindings: ['complete:completed'],
  complete: Ember.computed('isCompleted', function(){
    return this.get('isCompleted');
  })
});

This is not working. Class name doesn't calculated. How can I do this?

This is my route:

export default Ember.Route.extend({
  model: function(){
    return Ember.RSVP.hash({
      todoList: this.store.findAll('todo')
    });
  }
});

and template.hbs

{{#each todoList as |todo|}}
  {{todo-item todo=todo}}
{{/each}}
Solution 
  • export default Ember.Component.extend({
  tagName: 'li',
  classNameBindings: ['todo.isCompleted:completed']
});