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

Additional Resources