Unable to filter completed tasks in Meteor Todo Tutorial


#1

In section 8 of the Meteor tutorial, changing temporary UI state is discussed. The section shows how to use a check box to filter a list of completed items in a to-do list.

I believe I’ve copied the code to do so, but checking the box doesn’t seem to change the list. Perhaps I missed something? A terrible typo, or has something changed?

My JavaScript is as follows:

if (Meteor.isClient) {
  Template.body.helpers({
    tasks: function () {
      if (Session.get('hideCompleted')) {
        return Tasks.find({checked: {$ne: true}}, {sort: {createdAt: -1}});
      } else {
        return Tasks.find({}, {sort: {createdAt: -1}});
      }
    },
    hideCompleted: function () {
      return Session.get('hideCompleted');
    },
    incompleteCount: function() {
      return Tasks.find({checked: {$ne: true}}).count();
    }
  });

  /* ... */

  Template.task.events({
    'click .toggle-checked': function () {
      Tasks.update(this._id, {
        $set: {checked : ! this.checked}
      });
    },
    'change .hide-completed input': function (event) {
      Session.set('hideCompleted', event.target.checked);
    },
  });
}

And my HTML:

<!-- ... -->
    <label class="hide-completed">
      <input type="checkbox" checked="{{hideCompleted}}" />
      Hide Completed
    </label>
<!-- ... -->

I’m running Meteor 1.1.0.3 and following the steps of the tutorial, if that helps.

Much thanks!


#2

Solved!

I made the trivial mistake of listening for changes in events on task elements, rather than the body.

By moving the event handler from Template.task.events to Template.body.events the functionality worked as desired.