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!