CODEWITHSUNDEEP
mongodbtemplatesmeteormeteorite
mlikj2006
mlikj2006

Reputation: 191

Confused as to how the template render action is called

I am trying to make the songs in a playlist appear on screen each time a user enters a song of choice. I have the following action to insert the song that they chose into the database:

 Template.search_bar.events({
'keypress #query' : function (evt,template) {
  // template data, if any, is available in 'this'
      if (evt.which === 13){
            var url = template.find('#query').value;
            $("#query").val('');
            $('#playlist_container').animate({scrollTop: $('#playlist_container')[0].scrollHeight});
            Template.list.search_get(url,0);    //insert records into the database
        }
   }

});

Template.list.search_get inserts the record into the database:

Meteor.call('update_record',Template.list.my_playlist_id, song, function(err,message){});

on the server side, I am pushing records into my database with the following format:

update_record: function(sessID, songObj){
    Links.update({sess: sessID}, {$push: {songs: {song_title: songObj["title"], videoId: songObj["video_id"], thumbnail: songObj["thumbnail"], index: songObj["index"]}}});
},

basically all my records have the format of:

{_id:,
 sess:, 
 songs: [{song_title:,
          videoId:,
          thumbnail:,
          index:},
         {song_title:,
          videoId:,
          thumbnail:,
          index:},...]
}

An array of song objects inside the songs field of the record. What I am trying to do is each time a user hits the search button, make that new song appear in the list. I am not sure how many times the render function gets called or how template renders a database object in hmtl. Currently i have the following html template for my list:

<template name="list">
<div id="playlist_container">
  <ul id="playlist">
    {{#each my_playlist.songs}}
           {{> track}}
    {{/each}}   
 </ul>
</div>

I believe my_playlist should call the following action on the client:

  Template.list.my_playlist = function(){
    console.log("myplaylist is called");
    return Links.findOne({sess: Template.list.my_playlist_id});
  }

It should return an object which contains an array of song object, for which i iterate through in #each my_playlist.songs, which should render each of the following track template:

<template name="track">
<li id="{{index}}" class="list_element">
    <div class="destroy"> </div>
    <div class="element_style">{{song_title}}</div>
</li>
</template>

However, upon successful insertion of record, i am not seeing the new song title appear. Any suggestions on how I might approach this?

Upvotes: 2

Views: 91

Answers (1)

Brad M
Brad M

Reputation: 7898

This code is the problem.

Template.list.my_playlist = function(){
    return Links.findOne({sess: Template.list.my_playlist_id});
}

Template.list.my_playlist_id never updates, and thus, the new template never renders.

Try this approach.

if (Meteor.isServer) {
    Meteor.methods({
        update_record: function(sessID, songObj){
            // update Links
            return Links.findOne({sess: sessID});
        }
    });
} else {
   Meteor.call('update_record',Template.list.my_playlist_id, song, function(err, song){
        Session.set('playlist', song);
    });
    Template.list.my_playlist = function(){
        return Session.get('playlist');
    }
}

Upvotes: 1

Related Questions