javascript - 将 rest api 返回的结果设置为 Meteor 中的模板变量

Question

我正在学习如何使用 Meteor，我正在尝试连接到 google map api 并返回 json 使用 meteor.http.get。以下代码工作正常，我可以将模板变量 test 设置为等于返回的 json 并查看它(我现在想将其用于学习目的):

if (Meteor.isServer) {
    Meteor.methods({
        getGoogleMaps: function () {
            this.unblock();
            return Meteor.http.call("GET", "http://maps.googleapis.com/maps/api/geocode/json",
                {params:{address:"8-10 Broadway, London SW1H 0BG,United Kingdom",
                    sensor:false}});
        }
    });
}

if (Meteor.isClient) {
    Template.main.test=function(){ return Session.get("response");}
    Meteor.call("getGoogleMaps", function(error, results) {
        Session.set("response", results.content); 
   });
}

但是以下方法将返回的json赋值给测试模板变量不起作用:

if (Meteor.isClient) {
    var response;

    Meteor.call("getResponses", function(error, results) {
            response= results.content;         
    });  

   Template.main.test=function(){ return response;}
}

这也不起作用:

if (Meteor.isClient) {
    Meteor.call("getResponses", function(error, results) {
            Template.main.test= results.content;        
    });  
}

为什么后两种方法不起作用？从 rest api 返回的结果设置模板变量的最合适方法是什么？

Answer 1

第二种方法设置了值，但是当从服务器收到响应时，客户端已经呈现了模板，因此您看不到结果。这种计时问题是第一次开始使用异步 javascript 时的常见问题，也是 Meteor 的 react 性如此吸引人的主要原因之一。

第三种方法与第二种方法有相同的计时问题，但它也将模板助手设置为非函数值，因此这是无效的。

由于 Meteor 的 react 性，第一种方法如您预期的那样工作。这一行:

Template.main.test=function(){ return Session.get("response");}

...注册对 Session.get('response') 的依赖。当最终从服务器收到响应时，对 Session.set('response') 的调用会触发所有依赖项的重新计算，因此模板会使用接收到的值再次呈现。

您可以通过执行以下操作更明确地看到这一点:

if (Meteor.isClient) {

  Template.main.rendered = function () {
    console.log('[main] rendered');
  };

  Template.main.helpers({
    test: function () { 
      console.log("[main] 'test' helper executed");
      return Session.get("response");
    }
  });

  Meteor.call("getGoogleMaps", function(error, results) {
    console.log("[main] response received");
    Session.set("response", results.content); 
  });
}