I am trying to build a spotify app that includes a playlist. I need to provide additional columns to the playlist view. I cannot inject html into the view because the model overwrites the edits shortly after. Is there some way to add my own data to the playlist items? At the moment I have a hack in place that uses another <ul> beside the playlist view. This looks like an extension of the playlist, but lacks much functionality.
Update: Here is what I ended up doing. This was largely prompted by the comment below.
playlistModel = new models.Playlist();
var playlistView = new views.List(playlistModel, function(track) {
var myData = getDataFor(track.data.uri);
var trackView = new views.Track(track,
views.Track.FIELD.NAME |
views.Track.FIELD.ARTIST |
views.Track.FIELD.DURATION |
views.Track.FIELD.ALBUM);
var name = document.createTextNode(myData.name);
var img = document.createElement('img');
img.src = 'https://graph.facebook.com/' + myData.friendID + '/picture';
img.className = 'friendPic';
img.alt = 'facebook profile picture of ' + myData.friendName;
var span = document.createElement('span');
span.appendChild(img);
span.appendChild(name);
trackView.node.insertBefore(span, trackView.node.firstChild);
return trackView;
});
$('#playlist').append(playlistView.node);