个人中心
gpt4 book ai didi

javascript - meteor : Not being able to hide UI elements

转载 作者：行者123 更新时间：2023-11-30 00:13:08 25 4
gpt4 key购买 nike

我正在学习教程 here ，这是关于在 meteorjs 中设置 session 变量。

但我无法让示例正常工作。单击隐藏按钮不会执行任何操作。

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>

一开始我的控制台输出符合预期:

function called
failure!

但是在单击hide-completed 复选框时，不会触发任何事件(即，控制台日志不会更改)。我错过了什么？

最佳答案

我想说这可能是因为您在 Template.task.events 中定义了“切换选中”处理程序，实际上您的复选框不是“任务”模板的一部分。将您的处理程序放在主体事件中，它应该被正确调用。

关于javascript - meteor : Not being able to hide UI elements，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35658428/

25 4 0
文章推荐： android - In-App Billing 的 Product Id 应该如何命名？
文章推荐： mysql - Logback DBAppender 不记录日志
文章推荐： javascript - 有没有办法在不使用Webview的情况下从html5调用android中的函数
文章推荐： mysql - 如何根据分数获取特定行数
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com