我正在尝试基于Flickr API调用生成Flickr URL,然后将该结果返回到handlebars.js模板。我正在努力寻找绕过异步流程的方法。
我试图创建一个回调函数,但我仍然不确定如何将已定义的对象或变量放入HTML模板中。
以下是Flickr API函数的代码:
var FlickrRandomPhotoFromSet = function(setID,callback){
Meteor.http.call("GET","http://api.flickr.com/services/rest/?method=flickr.photosets.getPhotos&api_key="+apiKey+"&photoset_id="+setID+"&format=json&nojsoncallback=1",function (error, result) {
if (result.statusCode === 200)
var photoResult = JSON.parse(result.content);
var photoCount = photoResult.photoset.total;
var randomPhoto = Math.floor((Math.random()*photoCount)+1);
var selectedPhoto = photoResult.photoset.photo[randomPhoto];
var imageURL = "<img src=http://farm"+selectedPhoto.farm+".staticflickr.com/"+selectedPhoto.server+"/"+selectedPhoto.id+"_"+selectedPhoto.secret+"_b.jpg/>";
FlickrObject.random = imageURL;
}
if (callback && typeof(callback)==="function") {
callback();
}
});};
我的模板代码是:
Template.backgroundImage.background = function(){
FlickrRandomPhotoFromSet(setID,function(){
return FlickrObject;
});
};
但这仍然让我陷入困境,无法将定义的对象放入我的HTML中,其编码如下:
<template name="backgroundImage">
<div id="background">
{{random}}
</div>
答案 0 :(得分:10)
使用Session
作为中间人。它是反应性的,因此一旦设置它将使用新数据更改模板:
Template.backgroundImage.background = function(){
return Session.get("FlickrObject");
};
Template.backgroundImage.created = function() {
FlickrRandomPhotoFromSet(setID,function(){
Session.set("FlickrObject", FlickrObject)
});
}
因此,当创建模板以运行created
时,将运行FlickrRandomPhotoFromSet
方法,当返回结果时,它将设置Session哈希,而后者将在结果后立即设置背景收到了。
小心你的FlickrRandomPhotoFromSet
,我没注意到你有FlickrObject
传递给回调的论据。