So here's the problem.
I use this helper function to retrieve a possibly rearranged list in its new order. This happens here:
Template.list.get_list = function(param){
var ret = [];
$( "li.list_element" ).each(function() {
if($(this).is(':visible')){
ret.push( Links.findOne({_id:$(this).attr('id')}) );
}
});
//No input parameters, return the entire thing
if (typeof param == "undefined"){
return ret;
}
else if (param == "videoIds"){
var urls = [];
for (var i = 0; i < ret.length; i++){
urls[i] = ret[i].videoId;
}
return urls;
}
}
Now, to get to another part of my page, I have to hide the list which I use in the above helper function. This occurs here:
Template.header.events({
'click #generate_button': function (evt, template){
//bad code below:
if (Template.list.my_playlist().fetch().length == 0){
alert('Your tape is empty!');
}
else{
Template.player.value = Template.list.get_list();-------------------------->THIS IS THE IMPORTANT LINE.
generatePlaylist(Template.list.get_list("videoIds"));
$("#playlist").css('display','none',1000);//Check that this last argument works.
$("#player").fadeIn(1000);
$("#close_player").fadeIn(1000);
/*Things to hide*/
$("#play").hide();
$("#query").hide();
$("#share").fadeOut(1000);
$("#playlist_container").fadeOut(1000);
$('body').animate({backgroundColor: 'rgb(53,53,53)'}, 'slow');$('#title').animate({color: '#fff'}, 'slow');$('#query').fadeOut('slow');
}
}
});
So now, I've saved the list (which is NOT empty at the point indicated above). I want to enter the elements into a list. So I do this in the template file:
<template name="player">
<div id="player">
<div id="ytplayer"></div>
<div id="nav">
<br>
{{#each value}}
{{> unremovable_track}}
{{/each}}
</div>
</div>
</template>
Which now yields an empty list, indicating that something is amiss.