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

Indicating When All Todos Are Complete

Next we'll update our template to indicate when all todos have been completed. In index.html replace the static checkbox <input> with an {{input}}:

{{! ... additional lines truncated for brevity ... }}
<section id="main">
  {{input type="checkbox" id="toggle-all" checked=allAreDone}}
{{! ... additional lines truncated for brevity ... }}

This checkbox will be checked when the controller property allAreDone is true and unchecked when the property allAreDone is false.

In js/controllers/todos_controller.js implement the matching allAreDone property:

// ... additional lines truncated for brevity ...
allAreDone: function(key, value) {
  return !!this.get('length') && this.isEvery('isCompleted');
// ... additional lines truncated for brevity ...

This property will be true if the controller has any todos and every todo's isCompleted property is true. If the isCompleted property of any todo changes, this property will be recomputed. If the return value has changed, sections of the template that need to update will be automatically updated for us.

Reload your web browser to ensure that there are no errors and the behavior described above occurs.

Live Preview

Ember.js • TodoMVC

Additional Resources