Meteor模板助手:{{keyname}}显示空白

时间:2015-04-07 06:53:54

标签: javascript meteor handlebars.js meteor-blaze

comment.html:

<template name="comment">
    <img src="{{photo}}"> //blank
    {{photo}} //blank
</template>

comments.js:

Template.comment.helpers({
    photo: function(){
        Meteor.call('getPhoto', function(error, result) {console.log(result);return result})
    }
});

server.js:

Meteor.methods({
    getPhoto: function () {
        return Meteor.user().services.vk.photo;
        }
});

问题: console.log返回正确的值,但{{photo}}为空。 问题:为什么'照片'是空的?

1 个答案:

答案 0 :(得分:2)

[更新]

我刚刚意识到这里的问题是什么。

Meteor.call正在调用异步函数,就像调用ajax一样。所以Meteor.call('getPhoto')将返回undefined,结果只能在回调中检索

Meteor.call('getPhoto',function(err,result){console.log(result)});

考虑到这一点,你需要想出一种方法来捕获导致回调的结果。一种解决方案是使用ReactiveVariable

首先需要$ meteor add reactive-var

Template.comment.created = function (){
    var $this = this;
    $this.photo = new ReactiveVar("loading");
    Meteor.call('getPhoto', function (err, result) {
        if (err) console.log(err);
        $this.photo.set(result);
    });
}

现在定义你的帮助器来获取值;

   //this is optional
   Template.comment.helpers({
        photo: function(){ 
           return Template.instance().photo.get();
        }
    });

另一种解决方案是使用Session

  //everything here is in the client
  Meteor.call('getPhoto', function(error, result){
    Session.set('thePhoto', result);
  });

  // use reactive Session variable in helper
  Template.comment.helpers({
    photo: function(){
      return Session.get('thePhoto');
    }
  });

关于使用Session的问题是你要设置一个全局变量,如果你有很多评论并且每条评论需要有一张独特的照片,那么Session可能不是最好的方法它。


当您宣布帮助时,您正在调用函数Meteor.call

Template.comment.helpers({
    photo: Meteor.call('getPhoto', function(error, result) {console.log(result);return result})

});

所以你所做的与以下内容相同:

var a = Meteor.call('getPhoto', function(error, result) {console.log(result);return result})
Template.comment.helpers({
        photo: a //a is just a value 
});

要使.helpers正常工作,您应该将功能分配给photo

Template.comment.helpers({
    photo: function(){
       var r;
       Meteor.call('getPhoto', function(error, result) {r = result});
       return r;
    } 
});
  

在幕后,每个助手都会启动一个新的Tracker.autorun。当其反应依赖性发生变化时,将重新运行帮助程序。助手依赖于他们的数据上下文,传递的参数以及在执行期间访问的其他被动数据源。 - 来自Meteor Doc

应该调用

.helpers,因为您要使用.helpers的原因是在视图中启用reactivity。因此.helpers内的内容必须是函数。


如果你仍然不理解我的意思,这里有简化的例子:

var a = function(){ console.log("hey"); return 1}

var b = a();

var c = a; 

b(); //this would run into an error saying that b is a not a function

c(); //this would console.log "hey"