流星异步代码以更新视图答案

【问题标题】：Meteor async code to update a view流星异步代码以更新视图
【发布时间】：2013-11-06 08:17:45
【问题描述】：

所以我要做的是发出 HTTP 获取请求，然后使用响应更新视图。由于某种原因，它不起作用。这是我所拥有的。

我一直在关注这个要点：https://gist.github.com/3443021

在客户端：

Template.search.items = function() {
    var query = Session.get("query");
    console.log(query);
    var resp;
    Meteor.call("search", query, function(err, res) {
        console.log(res);
        //return res;
        return [1,2,4];
    });
};

在服务器上：

Meteor.methods({
    search: function(query) {
        var fut = new Future();
        // var onComplete = fut.resolver();

        Meteor.http.get("http://localhost:4242/autocomplete/"+query, function(err, res) {
            var content = res.content;
            var resp = JSON.parse(content);
            console.log(resp);
            fut.ret(resp)
        });
        return fut.wait();
    }
});

在我正在做的事情上：

<template name="search">
<h1>test</h1>
<table class="table table-hover">
<tbody>
  {{#each items}}
    {{> searchItem}}
  {{/each}}
</tbody>

如果我从 Meteor.call 函数内部返回，似乎没有任何东西被发送到视图。有什么想法吗？

【问题讨论】：

标签： javascript asynchronous meteor

【解决方案1】：

在客户端，没有纤程什么的，Meteor.call 是异步的，模板不会从助手那里得到返回值。

来自documentation：

在客户端，如果你不传递回调并且你不在存根中，调用将返回 undefined，你将无法获取方法的返回值。那是因为客户端没有纤程，所以实际上没有任何方法可以阻止远程执行方法。

您可以在模板更改后使用rendered 回调手动操作模板。

Template.search.rendered = function() {
  var query = Session.get("query"),
      table = this.find('.table-container');
  console.log(query);
  var resp;
  Meteor.call("search", query, function(err, res) {
    console.log(res);
    table.innerHTML = Template.search_items(res); // render the table with another template
  });
}

【讨论】：

【解决方案2】：

我正在使用这个解决方案，更复杂，但没有会话。但更好的方法是在背景上使用一些 model （模板可以使用模型调用 - 使用 {{#with}} 车把）。 我只会展示这个原理......

Template.search.items= function() {

 //todo: move this 'Promiss' class to shared code.
 var Promiss = function (iniValue) {

    var self = this;

    //-- Reactive Property Result, setter & getter
    this._result = iniValue;
    this._resultDeps = new Deps.Dependency;
    this.setResult = function(value) {

        self._result = value;
        self._resultDeps.changed();
        //at this moment template will be recomputed, because we have
        // changed '_resultDeps'
    };

    this.getResult = function() {
        Deps.depend(self._resultDeps);
        return self._result;
    };

  }; //end of Promiss class


//after recompution we take saved result
if (this._backupSearchPromiss)
    return this._backupSearchPromiss;

var promiss = new Promiss([/*ini value untill server response*/]);
this._backupSearchPromiss= promiss;

//call server..
Meteor.call("search", function (err, result) {
    //todo: handle error
    promiss.setResult(result);

});
return promiss;

};//end of template method

在 html 中：

{{#each search.getResult}}
  {{>searchItem}}
{{/each}}

【讨论】：