Question

在我的待办事项应用中，我有一个静态 <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!?
        }
    });
}

Answer 1

实现这一目标的关键是将assortment变量更改为被动数据源。在Meteor中重置被动数据源时，将重新运行依赖于它的功能。重置普通的vanilla变量时，不会重新运行函数。

此处的两个选项是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);
}

MeteorJS Tasks.find（）通过<select>下拉？</select>

1 个答案: