MeteorJS - 为什么我的页面在数据更改时不会重新呈现？答案

【问题标题】：MeteorJS - Why is my page doesn't re-render when the data changed?MeteorJS - 为什么我的页面在数据更改时不会重新呈现？
【发布时间】：2015-01-10 08:05:35
【问题描述】：

我正在使用 MeteorJS 1.0.2.1 填充应用程序。一开始，这是我的searchResults模板：

<template name="searchResults">
    <div class="dummy-column">
        <h2>Search Results</h2>
        <ul>
            {{#each results}}
                <li>
                    {{city}} - {{state}}
                </li>
            {{/each}}
        </ul>
    </div>
</template>

这是处理一些事件并为searchResults模板提供帮助的脚本文件：

Template.searchResults.helpers({
    results: function(){
        console.log("reach here only 1 time !");
        Meteor.subscribe('zips_results', key, function(){
            return Zips.find().fetch();
        });
    }
});

var key = '';

Zips = new Meteor.Collection('zips');

$(document).ready(function() {
    $('.morphsearch-input').keyup(function(){
        key = $(".morphsearch-input").val();
    });
});

所以我想要的是，每次我输入$('.morphsearch-input') 搜索输入时，我的应用程序都会通过调用返回相应的搜索结果：

Meteor.subscribe('zips_results', key, function(){
                return Zips.find().fetch(); // And I've tested that this runs correctly
            });

但问题是Template.searchResults.helpers.results 似乎只被调用一次（在加载开始时），这使得我的模板没有改变。我仍然不知道为什么这不起作用。所以我希望你们能帮助我！非常感谢你们！

【问题讨论】：

我建议通读meteor.com 上的教程。订阅不应该进入 helpers，你应该使用 Blaze 的事件处理而不是直接使用 jQuery。
你能说得更具体点吗，比如我应该把订阅函数放在哪里，这样我的代码才能正常工作？

标签： javascript meteor render helpers

【解决方案1】：

首先将搜索输入文本模板添加到您的 searchResults 模板。它必须在单独的模板中，请阅读here 为什么。

searchResults.js

<template name="searchResults">
{{>searchInput}}
<div class="dummy-column">
    <h2>Search Results</h2>
    <ul>
        {{#each results}}
            <li>
                {{city}} - {{state}}
            </li>
        {{/each}}
    </ul>
</div>

使用 Session 使您的模板更具交互性。在下面的模板中，我们获取输入的文本并将其存储在一个会话变量中。

searchInput.js

Template.searchInput.events({
  'keyup input.search-zip': function (event, template) {
      event.preventDefault();
      Session.set('searchZip', event.currentTarget.value);
  }
});

对应的模板必须是：

searchInput.html

<template name="searchInput">
    <div class="form-group">
        <input type="text" class="form-control search-zip" placeholder="Search for zip...">
    </div>
</template>

然后将上述内容放在 searchResults javascript 文件中。更改您的订阅 (Meteor.subscribe("zips")) 以将您所有的邮政编码带入 miniMongo，然后在结果助手中找到用户搜索的数据。

searchResults.js

//This brings all zips into miniMongo and then into helper you 
//make the query while the user typing
Meteor.subscribe("zips");
Template.searchResults.helpers({
    results: function() {
        return Zips.find({youKey:Session.get('searchZip')})
    }
});

希望能帮到你

【讨论】：

【解决方案2】：

订阅的readyCallback 不应返回任何内容（返回值不会发生任何事情）。我会这样做：

Template.searchResults.helpers({
    results: function(){
        return Zips.find();
    }
});

Template.searchResults.events({
    'keyup .morphsearch-input': function(event, template){
        if(template.handle){
            template.handle.stop()
        }
        var key = event.currentTarget.value
        template.handle = Meteor.subscribe('zips_results', key);
    }
});

Template.searchResults.destroyed = function()
    this.handle.stop()
};

【讨论】：