How to call plugin reactively in meteor js

help
1

i have a song plugin html5 jquery music player which take song names from the data base. i instantiated it inside the Template.onRendered as it is recommended. and its is working but its not reactive. so if i add new songs it will not appeared inside the play list.

the template code:

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

the on created section

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

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

the template helper

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

the template events

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

2

@waldgeist could you help please , i’ve read here that you’ve had the same use-case. Thanks

3

Collections are reactive, so why do you need the Session?

Template.mysongs.Helpers(
 allsongs : function(){
  return songs.find({})
 },
 artists: function() {
  return 'Alexandra';
 },
 cover: function() {
  return '1.jpg';
 }
);

I see you add some static values in your forEach, is it that they do not exist in your collection? You would need to create helpers for those, or inject them on servers side into your publication.

4

@jamgold thanks for your reply, at the beginning i’ve tried without Session and it doesn’t work, i thought Session to force the playlist inside the player plugin to be reactive. I also tried to put the onRendered content inside the Tracker.autorun but it generated another instance of the player and i had DomException and events are not firing anymore. For the artist and the cover they sould be static