Ember Octane is here! A lot has changed since Ember 3.14, including these Guides. Read more in the Ember Blog.

Old Guides - You are viewing the guides for Ember v1.10.0. VIEW v3.15.0
Edit Page

Displaying a Model's Complete State


TodoMVC strikes through completed todos by applying a CSS class completed to the <li> element. Update index.html to apply a CSS class to this element when a todo's isCompleted property is true:

{{! ... additional lines truncated for brevity ... }}
<li {{bind-attr class="todo.isCompleted:completed"}}>
  <input type="checkbox" class="toggle">
  <label>{{todo.title}}</label><button class="destroy"></button>
</li>
{{! ... additional lines truncated for brevity ... }}

This code will apply the CSS class completed when the todo's isCompleted property is true and remove it when the property becomes false.

The first fixture todo in our application has an isCompleted property of true. Reload the application to see the first todo is now decorated with a strike-through to visually indicate it has been completed.

Live Preview

Ember.js • TodoMVC

Additional Resources