Question

我正在开发多租户应用。每个应用都有一个视频模块，可以输入几个youtube播放列表/频道ID。

Apps = {_id: "app01", playlists:['PL4IrNZLvgtED4RTH3xCf9085hwqKmb4lM','PLlYqpJ9JE-J8QIlua0KsBIxp-VQLyM_nO']}
Apps = {_id: "app02", playlists:['id22','id23']}

等等。

当用户重定向到localhost：3000 / app /：_ id时，该应用程序订阅Meteor.subscribe（＆＃39; apps＆＃39;，_ 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;
            }
        });
    }       
});

问题出在我的模板中，我可以看到myPlaylist.date是变换的结果，但我看不到myPlaylist.videos（虽然我看到console.log结果有数据）

有谁知道如何解决这个问题？非常感谢！

Answer 1

正如@Ian Jones评论的那样，$.getJSON是异步的，因此doc.videos永远不会有你放置console.log的值。要解决此问题，请使用ReactiveVar package：

Template.Videos.onCreated(function() {
  this.videos = new ReactiveVar([]);
  var self = this;
  Apps.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 = self.videos.get();
                        videos.push(video);
                        self.videos.set(videos);
                      })//end getJSON
                    }//end for
            }
        });
    }
});
Template.Videos.helpers({
  myPlaylist:function(){
      var instance = Template.instance();
      return instance.videos.get();
  }
});

Answer 2

感谢您的所有帮助。我从一开始就不愿意做反应变量，但你的回答激励我去做，非常感谢。这是我的最终代码：

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();
  }
});

带有外部数据的Meteor客户端变换集合（youtube）

2 个答案: