Hide-completed dont' work

blaze
1

hide-completed dont’ work, nothing comes up (console log) when I check the checkbox

main.html

< label class=“hide-completed” >
< input type=“checkbox” >
Hide Completed Tasks
< /label >

main.js

Template.body.onCreated(function bodyOnCreated() {
this.state = new ReactiveDict();
});

Template.body.events({
‘change .hide-completed input’(event, instance) {

 instance.state.set('hideCompleted', event.target.checked);
  
var hidestate = instance.state.get('hideCompleted');
console.log(hidestate);

}
});

2

You’ll need to add the hide-completed class to your input (instead of your label) if you want your current event selector to work.

3

like this?

< label >
< input type=“checkbox” class=“hide-completed” >
Hide Completed Tasks
< /label >

it don’t work

4

Sorry, should’ve told you to update your event also:

Template.body.events({
  'click input.hide-completed' (event, instance) {
    // Your code
  }
});
5

still no activity :frowning:

6

If you do a console.log(event), do you see the event (inside your click event)?

7

No output from console.log(event);

8

Are you using this package? Because otherwise, you will have to attach your events to a template.

9

Now something happend:

main.js:19 Uncaught TypeError: Cannot read property ‘state’ of null

this line: instance.state.set(‘hideCompleted’, event.target.checked);

10

Yeah, you can’t just use body as a template. So, use a template name like main:

<template name="main">
  <label>Hide Completed Tasks</label>
  <input type="checkbox" class="hide-completed">
</template>

And your main.js:

Template.main.onCreated(function () {
  this.state = new ReactiveDict();
});

Template.main.events({
  'click input.hide-completed' (event, instance) {
    instance.state.set('hideCompleted', event.target.checked);
    var hidestate = instance.state.get('hideCompleted');
    console.log(hidestate);
  }
});
11

It works, I’m new to Meteor

Thanks.

12

No problem, glad to help!

13

Just run into the same problem in the official tutorial here “https://www.meteor.com/tutorials/blaze/temporary-ui-state” needs fixing?