MeteorJS Tasks.find(） 通过 <选择> 下拉列表

MeteorJS Tasks.find() by <select> dropdown?

本文关键字：下拉列表 选择 通过 Tasks find MeteorJS      更新时间：2023-09-26

在我的待办事项应用程序中，我有一个静态<select>下拉列表，我喜欢用它来从数据库中查找特定任务。但是如何让它工作呢？我连接了一个事件并尝试设置一个变量assortment但似乎模板没有使用新值重新渲染！请查看休耕代码：

.HTML

<head>
    <title>eisenhower</title>
</head>
<body>
    {{> eisenhower}}
</body>
<template name="eisenhower">
    <div class="eisenhower">
        <select id="assortment"> <!-- HERE IS THE DROPDOWN LIST -->
            <option value="">all tasks</option>
            <option value="true">done tasks</option>
            <option value="false" selected>undone tasks</option>
        </select>
        <div>
            <h1>{{doTasksCount}} to do</h1>
            <ul>
                <li><form><input type="input" name="new" section="do" /></form></li>
                {{#each doTasks}}
                    <li><input type="checkbox" checked="{{checked}}" /> {{task}}</li>
                {{/each}}
            </ul>
        </div>
        <div>
            <h1>{{scheduleTasksCount}} to schedule</h1>
            <ul>
                <li><form><input type="input" name="new" section="schedule" /></form></li>
                {{#each scheduleTasks}}
                    <li><input type="checkbox" checked="{{checked}}" /> {{task}}</li>
                {{/each}}
            </ul>
        </div>
        <div>
            <h1>{{delegateTasksCount}} to delegate</h1>
            <ul>
                <li><form><input type="input" name="new" section="delegate" /></form></li>
                {{#each delegateTasks}}
                    <li><input type="checkbox" checked="{{checked}}" /> {{task}}</li>
                {{/each}}
            </ul>
        </div>
        <div>
            <h1>{{abandonTasksCount}} to abandon</h1>
            <ul>
                <li><form><input type="input" name="new" section="abandon" /></form></li>
                {{#each abandonTasks}}
                    <li><input type="checkbox" checked="{{checked}}" /> {{task}}</li>
                {{/each}}
            </ul>
        </div>
    </div>
</template>

.JS

Tasks = new Mongo.Collection("tasks");
assortment = true; // HERE IS MY VARIABLE FOR CHANGING THE .find() CLAUSE!
if (Meteor.isClient) {
    Template.eisenhower.helpers({
        //tasks
        doTasks: function() {
            return Tasks.find({section: "do", done: assortment}, {sort: {createdAt: -1}});
        },
        scheduleTasks: function() {
            return Tasks.find({section: "schedule", done: assortment}, {sort: {createdAt: -1}});
        },
        delegateTasks: function() {
            return Tasks.find({section: "delegate", done: assortment}, {sort: {createdAt: -1}});
        },
        abandonTasks:  function() {
            return Tasks.find({section: "abandon", done: assortment}, {sort: {createdAt: -1}});
        },
        checked: function() {
            return Tasks.findOne(this._id).done;
        },
        //tasks counter
        //doTasksCount:         function() { return dos.count(); },
        //scheduleTasksCount: function() { return schedules.count(); },
        //delegateTasksCount: function() { return delegates.count(); },
        //abandonTasksCount:  function() { return abandons.count(); },
    });
    Template.eisenhower.events({
        "submit form": function(event, template) {
            event.preventDefault();
            var obj     = event.target.new; //input reference
            var task    = obj.value;
            var section = obj.getAttribute("section"); //obj.section doesnt work here
            Tasks.insert({task: task, section: section, done: false, createdAt: new Date()}, function(error, id) {
                if(!error) {
                    event.target.new.value = ""; //clear form
                }
            });
        },
        "change checkbox": function(event) {
            Tasks.update(this._id, {$set: {done: event.target.checked}});
        },
        "change select": function(event) {
            assortment = (event.target.value) ? event.target.value : true; // SET VARIABLE! BUT DATA DOESNT CHANGE THOUGH!?
        }
    });
}

使其正常工作的关键是将assortment变量更改为反应式数据源。 在 Meteor 中重置反应式数据源时，将重新运行依赖于它的函数。 重置普通香草变量时，不会重新运行函数。

您在此处的两个选项是将assortment作为Session密钥，或使其成为ReactiveVar。 您应该查看每个文档，并选择最适合您的文档：

http://docs.meteor.com/#/full/session

http://docs.meteor.com/#/full/reactivevar

两者之间有一些值得注意的区别，例如，ReactiveVar需要安装一个包，并且当该值重置为与以前存在的相同值时不会重新运行。但是要演示 Session 的模式，您需要首先设置它：

Session.setDefault('assortment', true);

在模板帮助程序中，获取以下值：

doTasks: function() {
  return Tasks.find({section: "do", done: Session.get('assortment')}, {sort: {createdAt: -1}});
}

并在模板事件中设置它：

"change select": function(event) {
  var assortment = (event.target.value) ? event.target.value : true;
  Session.set('assortment', assortment);
}
相关文章：