流星模板更新答案

【问题标题】：Meteor template updating流星模板更新
【发布时间】：2014-03-22 01:23:25
【问题描述】：

我是 Meteor 的新手。我建立了简单的测试并陷入了非常简单的部分。我的网页内容仅在数据库更改时更新，但是当函数返回结果更改时如何强制更新？这是我的应用程序的部分代码：

client.js：

Meteor.subscribe("tasks");

var search_query = "";

Template.page.tasks = function() {
    return Tasks.find({title: {$regex: search_query}});
};

Template.task.events({
    'click .checkmark': function() {
        Tasks.update({_id: this._id}, {$set: {done: !this.done}});
    }
});

Template.page.events({
    'keyup .search': function() {
        search_query = $(".search").val();
    }
});

todo.html:

<head>
  <title>Todo list</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
  {{> page}}
</body>

<template name="page">
    <div class="tasks">
        <h1>Collections TODOs</h1>
        <input type="text" class="search" placeholder="Search...">
        {{#each tasks}}
            {{> task}}
        {{/each}}
    </div>
</template>

<template name="task">
    <div class="task well well-small">
        <button type="button" class="close cancel">&times;</button>
        <h3>
            {{#if done}}
                <button type="button" class="checkmark done">&#10003;</button>
            {{else}}


    <button type="button" class="checkmark muted">&#10003;</button>
        {{/if}}
        {{title}}
    </h3>
    <div class="creator muted">{{creator}}</div>
    <p>{{description}}</p>
</div>

所以现在，我希望每当用户在 input.search 框变量 search_query 中键入内容时，Template.page.tasks 会返回不同的结果。但没有什么真正的更新。您可以在http://slava.meteor.com查看应用程序

【问题讨论】：

标签： javascript meteor

【解决方案1】：

您需要reactive variable 才能再次动态运行搜索。像这样将search_query 变成Session 变量

Template.page.tasks = function() {
    return Tasks.find({title: {$regex: Session.get("search_query") }});
};

在你的活动中：

Template.page.events({
   'keyup .search': function() {
        Session.set("search_query", $(".search").val());
    }
});

【讨论】：

谢谢，它有效。但是现在，每次模板更新我的搜索字段中的文本时都会消失。所以看起来页面被刷新了。您能否提供任何提示，我该如何构建更好的 UI？
我显然可以设置<input type="text" class="search" placeholder="Search..." value={{search_query}}>并手动将焦点放在它上面，但这仍然有点奇怪
查看preseve-input，了解刷新页面时保留用户输入的方法。