Javascript Meteorjs:无法隐藏UI元素_Javascript_Node.js_Meteor

Javascript Meteorjs:无法隐藏UI元素

javascript node.js meteor

Javascript Meteorjs:无法隐藏UI元素,javascript,node.js,meteor,Javascript,Node.js,Meteor,我正在学习教程，它是关于在meteorjs中设置会话变量的但我无法让这个例子起作用。单击“隐藏”按钮不会执行任何操作 JS: HTML: 但是单击隐藏完成的复选框时，不会触发任何事件（即控制台日志不会更改）。我遗漏了什么？我想说，这可能是因为您在Template.task.events中定义了“toggle checked”处理程序，实际上，您的复选框不是“task”模板的一部分。将处理程序放入body事件中，应该正确调用它 Tasks = new Mongo.Collection("tas

我正在学习教程，它是关于在meteorjs中设置会话变量的

但我无法让这个例子起作用。单击“隐藏”按钮不会执行任何操作

JS:

HTML:

但是单击

隐藏完成的复选框时，不会触发任何事件（即控制台日志不会更改）。我遗漏了什么？我想说，这可能是因为您在Template.task.events中定义了“toggle checked”处理程序，实际上，您的复选框不是“task”模板的一部分。
将处理程序放入body事件中，应该正确调用它
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);

    }
  });
}

<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>

function called
failure!