CODEWITHSUNDEEP
javascriptnode.jsmeteor
goelakash
goelakash

Reputation: 2519

Meteorjs: Not being able to hide UI elements

I am following the tutorial here, which is about setting session variables in meteorjs.

But I can't get the example to work. Clicking on hide button doesn't do anything.

JS:

Tasks = new Mongo.Collection("tasks");
if (Meteor.isClient) {
  // This code only runs on the client
  Template.body.helpers({
    tasks: function(){
    console.log("function called");
      if (Session.get("hideCompleted")) {
        // If hide completed is checked, filter tasks
        console.log("success!");

        return Tasks.find({checked: {$ne: true}}, {sort: {createdAt: -1}});
      } else {
        console.log("failure!");
        // Otherwise, return all of the tasks
        return Tasks.find({}, {sort: {createdAt: -1}});
      }
    },
    hideCompleted: function () {
      return Session.get("hideCompleted");     }
  });
  Template.body.events({
    "submit .new-task": function (event) {
      // Prevent default browser form submit
      event.preventDefault();
      // Get value from form element
      var text = event.target.text.value;
      // Insert a task into the collection
      Tasks.insert({
        text: text,
        createdAt: new Date() // current time
      });
      // Clear form
      event.target.text.value = "";
    }
  });
  Template.task.events({
    "click .toggle-checked": function () {
      // Set the checked property to the opposite of its current value
      Tasks.update(this._id, {
        $set: {checked: ! this.checked}
      });
    },
    "click .delete": function () {
      Tasks.remove(this._id);
    },
    "change .hide-completed input": function (event) {
      console.log("Changed!");
      Session.set("hideCompleted", event.target.checked);

    }
  });
}

HTML:

<head>
  <title>Todo List</title>
</head>
<body>
  <div class="container">
    <header>
      <h1>Todo List </h1>
        <label class="hide-completed">
        <input type="checkbox" checked="{{hideCompleted}}" />
          Hide Completed Tasks
        </label>
        <form class="new-task">
        <h2> Add a task </h2>
          <input type="text" name="text" placeholder="Type to add new tasks" />
        </form>
    </header>
    <ul>
      {{#each tasks}}
        {{> task}}
      {{/each}}
    </ul>
  </div>
</body>
<template name="task">
  <li class="{{#if checked}}checked{{/if}}">
    <button class="delete">&times;</button>
    <input type="checkbox" checked="{{checked}}" class="toggle-checked" />
    <span class="text">{{text}}</span>
  </li>
</template>

At the beginning my console output is as expected:

function called
failure!

But on clicking the hide-completed checkbox, no event is triggered (i.e., console log doesnt change). What have I missed?

Upvotes: 2

Views: 42

Answers (1)

Rafouille
Rafouille

Reputation: 863

I would say that it is probably because you defined your "toggle checked" handler in the Template.task.events , indeed your checkbox is not part of the "task" template. Put your handler in the body events, and it should be called properly.

Upvotes: 1

Related Questions