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.