Toggling All Todos Between Complete and Incomplete Edit Page

TodoMVC allows users to toggle all existing todos into either a complete or incomplete state. It uses the same checkbox that becomes checked when all todos are completed and unchecked when one or more todos remain incomplete.

To implement this behavior update the allAreDone property in js/controllers/todos_controller.js to handle both getting and setting behavior:

1
2
3
4
5
6
7
8
9
10
11

// ... additional lines truncated for brevity ...
allAreDone: function (key, value) {
  if (value === undefined) {
    return !!this.get('length') && this.everyBy('isCompleted', true);
  } else {
    this.setEach('isCompleted', value);
    this.invoke('save');
    return value;
  }
}.property('@each.isCompleted')
// ... additional lines truncated for brevity ...

If no value argument is passed this property is being used to populate the current value of the checkbox. If a value is passed it indicates the checkbox was used by a user and we should set the isCompleted property of each todo to this new value.

The count of remaining todos and completed todos used elsewhere in the template automatically re-render for us if necessary.

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

Live Preview

Ember.js • TodoMVC

Additional Resources