流星 - 创建一个复选框，用于隐藏会话中已完成的决议

Meteor - Creating a checkbox that hides finished resolutions in a session

本文关键字：会话隐藏用于已完成复选框创建一个流星更新时间：2023-09-26

我目前正在关注这个流星教程，在教程 #7 中，关于会话，我有这段代码，当选中复选框时，它应该隐藏已完成的待办事项，但事实并非如此。我看不到任何效果。如果可以，请协助，问候。

Resolutions = new Mongo.Collection("resolutions");
if (Meteor.isClient) {
    Template.body.helpers({
        'resolutions': function() {
            if (Session.get("hideFinished")){
                return Resolutions.find({checked: {$ne: true}});
            } else {
                return Resolutions.find();
            }
        },
        'hideFinished': function(){
            return Session.get("hideFinished");
        }
    });
    Template.body.events({
        'submit .new-resolution': function(event) {
            var title = event.target.title.value;
            Resolutions.insert({
                title: title,
                createdAt: new Date()
            });
            return false;
        },
        'change .hide-finished': function(event){
            Session.set("hideFinished", event.target.checked);
        }
    });
    Template.resolution.events({
        "click .toggle-checked": function(){
            Resolutions.update(this._id, {$set:{
                checked: !this.checked
            }});
        },
        "click .delete": function() {
            Resolutions.remove(this._id);
            console.log("remove");
        }
    });
}
if (Meteor.isServer) {
    Meteor.startup(function() {
        // code to run on server at startup
    });
}

<head>
    <title>resolutions</title>
</head>
<body>
    <div class="container">
        <header>
            <h1>Monthly Resolutions</h1>
            <label class="hide_finished">
                <input type="checkbox" checked="{{hideFinished}}">
                Hide finished resolutions
            </label>
            <form class="new-resolution">
                <input type="text" name="title" placeholder="New Resolutions">
                <input type="submit" value="Submit">
            </form>
        </header>
        <ul>
            {{#each resolutions}}
                {{> resolution}}
            {{/each}}
        </ul>
    </div>
</body>
<template name="resolution">
    <li class="{{#if checked}}checked{{/if}}">
        <input type="checkbox" checked="{{checked}}" class="toggle-checked">
        {{title}}
        <button class="delete">Remove</button>
    </li>
</template>

一个简单的（但花了一段时间才发现！）错别字：您的标签分类hide_finished带有_，但您的事件hide-finished带有-。

完美工作。