我有一个歌曲插件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
});
由于