Displaying the Number of Incomplete Todos Edit Page
Next we'll update our template's hard-coded count of completed todos to reflect the actual number of completed todos. Update index.html
to use two properties:
Implement these properties as part of this template's controller, the Todos.TodosController
:
1 2 3 4 5 6 7 8 9 10 11 12 |
// Hint: these lines MUST NOT go into the 'actions' object. // ... additional lines truncated for brevity ... remaining: function () { return this.filterBy('isCompleted', false).get('length'); }.property('@each.isCompleted'), inflection: function () { var remaining = this.get('remaining'); return remaining === 1 ? 'item' : 'items'; }.property('remaining'), // ... additional lines truncated for brevity ... |
The remaining
property will return the number of todos whose isCompleted
property is false. If the isCompleted
value of any todo changes, this property will be recomputed. If the value has changed, the section of the template displaying the count will be automatically updated to reflect the new value.
The inflection property will return either a plural or singular version of the word "item" depending on how many todos are currently in the list. The section of the template displaying the count will be automatically updated to reflect the new value.
Reload your web browser to ensure that no errors occur. You should now see an accurate number for remaining todos.