Meteor客户端转换集合与外部数据(youtube)
我正在开发多租户应用程序。每个应用程序都有一个视频模块,该模块将几个youtube播放列表/频道id作为输入Meteor客户端转换集合与外部数据(youtube),meteor,youtube,transform,Meteor,Youtube,Transform,我正在开发多租户应用程序。每个应用程序都有一个视频模块,该模块将几个youtube播放列表/频道id作为输入 Apps = {_id: "app01", playlists:['PL4IrNZLvgtED4RTH3xCf9085hwqKmb4lM','PLlYqpJ9JE-J8QIlua0KsBIxp-VQLyM_nO']} Apps = {_id: "app02", playlists:['id22','id23']} 等等 当用户重定向到地址localhost:3000/app/:_id时
Apps = {_id: "app01", playlists:['PL4IrNZLvgtED4RTH3xCf9085hwqKmb4lM','PLlYqpJ9JE-J8QIlua0KsBIxp-VQLyM_nO']}
Apps = {_id: "app02", playlists:['id22','id23']}
等等
当用户重定向到地址localhost:3000/app/:_id时,应用将订阅Meteor.subscribe('apps',_id))
现在在客户端,我需要呈现一个页面,显示播放列表列表(或频道列表),其中包含播放列表的名称、播放列表缩略图;然后,如果用户单击名称/缩略图,它将显示另一个页面,其中包含属于该播放列表/频道的视频列表
我正在做的是让一个助手检索所有youtube播放列表的信息:
Template.Videos.helpers({
myPlaylist:function(){
return Apps.findOne({}, {
transform: function (doc){
playlists = doc.playlists;
doc.date = new Date(); //for testing
doc.videos = [];
for (var i=0;i<playlists.length;i++){
console.log('find playlist: ',playlists[i]);
var url = 'https://gdata.youtube.com/feeds/api/playlists/'+playlists[i]+'?v=2&alt=json';
$.getJSON(url, function(response){
var video={};
video._id = response.feed.yt$playlistId.$t;
video.title = response.feed.title;
video.entry = response.feed.entry;
videos.push(video);
})//end getJSON
}//end for
doc.videos = videos;
console.log('Result:', doc);
return doc;
}
});
}
});
Template.Videos.helpers({
myPlaylist:函数(){
返回Apps.findOne({}{
转换:函数(doc){
playlists=doc.playlists;
doc.date=新日期();//用于测试
doc.videos=[];
对于(var i=0;i,正如@Ian Jones所评论的,$.getJSON
是异步的,因此doc.videos
将永远不会在您放置控制台.log
的地方有值。要解决此问题,请使用:
Template.Videos.onCreated(函数(){
this.videos=new ReactiveVar([]);
var self=这个;
Apps.findOne({}{
转换:函数(doc){
playlists=doc.playlists;
对于(var i=0;i谢谢你的帮助。我从一开始就不愿意做反应性var,但你的回答激励我去做,非常感谢。
这是我的最终代码:
Template.Videos.created = function(){
var instance = this;
instance.videos = new ReactiveVar([]);
instance.autorun(function(){
MenusList.findOne({}, {
transform: function (doc){
playlists = doc.playlists;
for (var i=0;i<playlists.length;i++){
console.log('find playlist: ',playlists[i]);
var url = 'https://gdata.youtube.com/feeds/api/playlists/'+playlists[i]+'?v=2&alt=json';
$.getJSON(url, function(response){
var video={};
video._id = response.feed.yt$playlistId.$t;
video.title = response.feed.title;
video.entry = response.feed.entry;
var videos = instance.videos.get();
videos.push(video);
instance.videos.set(videos);
})//end getJSON
}//end for
return doc;
}//end transform
});//end findOne
});//end autorun
}
Template.Videos.helpers({
myPlaylist:function(){
var instance = Template.instance();
return instance.videos.get();
}
});
Template.Videos.created=function(){
var实例=这个;
instance.videos=newreactivevar([]);
autorun(函数(){
MenusList.findOne({}{
转换:函数(doc){
playlists=doc.playlists;
对于(var i=0;i是否确实从console.log('Result:',doc')收到响应?因为$.getJSON函数是异步的,应该不会及时返回一个可用的值。@Ian&Geoffrey,我可以看到console.log,代码只需稍加修改(更改为var temp=Apps.find(…transform()…);我没有足够的声誉来投票支持你的答案,我会尽可能地投票支持你!
Template.Videos.created = function(){
var instance = this;
instance.videos = new ReactiveVar([]);
instance.autorun(function(){
MenusList.findOne({}, {
transform: function (doc){
playlists = doc.playlists;
for (var i=0;i<playlists.length;i++){
console.log('find playlist: ',playlists[i]);
var url = 'https://gdata.youtube.com/feeds/api/playlists/'+playlists[i]+'?v=2&alt=json';
$.getJSON(url, function(response){
var video={};
video._id = response.feed.yt$playlistId.$t;
video.title = response.feed.title;
video.entry = response.feed.entry;
var videos = instance.videos.get();
videos.push(video);
instance.videos.set(videos);
})//end getJSON
}//end for
return doc;
}//end transform
});//end findOne
});//end autorun
}
Template.Videos.helpers({
myPlaylist:function(){
var instance = Template.instance();
return instance.videos.get();
}
});