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:

TodoMVC通过在<li>元素上应用了一个名为completed的CSS类来标识已完成的待办事项。因此需要在一个待办事项的isCompleted属性为真的时候，更新index.html，为这个待办事项的元素添加一个CSS类：

  1. {{! ... additional lines truncated for brevity ... }}
  2. {{! ... 为保持代码简洁，在此省略了其他代码 ... }}
  3. <li {{bind-attr class="todo.isCompleted:completed"}}>
  4.   <input type="checkbox" class="toggle">
  5.   <label>{{todo.title}}</label><button class="destroy"></button>
  6. </li>
  7. {{! ... additional lines truncated for brevity ... }}
  8. {{! ... 为保持代码简洁，在此省略了其他代码 ... }}

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

以上代码将在待办事项的isCompleted属性为真的时候设置completed这个CSS类，当isCompleted为假的时候移除该CSS类。

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.

为我们应用构造的第一条待办事项的isCompleted属性是true，因此重载应用将会看到第一个待办事项有一条中划线，这表面其已经完成。

Live Preview

在线演示

Ember.js • TodoMVC

Additional Resources

附加资源