如何在流星js中反应调用插件

时间:2016-08-30 15:56:04

标签: jquery meteor

我有一个歌曲插件html5 jquery music player,它从数据库中获取歌曲名称。我按照建议在Template.onRendered中实例化它。它正在发挥作用,但它没有被动反应。因此,如果我添加新歌曲,它将不会出现在播放列表中。

模板代码:

<template name="mysongs">
 <!--items here appears reactively
 {{#each allsongs}}
    {{songurl}} 
 {{/each}}-->
  <!--playlist of player plugin is not reactive -->
  <div class="music-player-list"></div>
</template>

on on created section

Template.mysongs.onCreated(function(){
 this.subscribe("songs");
});

on on rendered section

  Template.mysongs.onRendered(function(){
  $('.music-player-list').ttwMusicPlayer(Session.get("myPlaylist"), {
   currencySymbol:'$',
   buyText:'BUY',
   tracksToShow:3,
   autoplay:false,
   ratingCallback:function(index, playlistItem, rating){
    //some logic to process the rating, perhaps through an ajax call
   }
 });

模板助手

Template.mysongs.Helpers(
allsongs : function(){
var mysongs = songs.find({}).fetch();
mysongs.forEach(function(song){
myPlaylist.push({"id":song._id, 
                 "title" : song.songname ,
                 "cover":'1.jpg' ,
                 "duration" : song.duration, 
                 "rating":5,
                 "mp3": song.songurl,
                 "buy":'#',
                 "artist":'Alexandra'});
console.log(song._id + "  " +song.songname + " " + song.songurl);
});
Session.set("myPlaylist", myPlaylist);
console.log("myPlaylist session"+Session.get("myPlaylist")); //reactively
return Session.get("myPlaylist");

});

模板事件

Template.mysongs.events({
 'click: .uploadbutton' : function(){
  // get the song object
  //save into database  
  });

由于

0 个答案:

没有答案