Question

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

Answer 1

I got this to work but I am not sure if it is a good and solid plan for production, as it will depend on internal data structures.

//Code alters the list returned from views.List and appends a column with the text PLAY.
var results = document.getElementById('idOfElementToDisplayListIn');
var pl = models.Playlist.fromURI(playlist_url, function(playlist) {
        var list = new views.List(playlist, function (track) {
    var ntrack=new views.Track(track, 
           views.Track.FIELD.NAME |
           views.Track.FIELD.ARTIST |
           views.Track.FIELD.DURATION |
           views.Track.FIELD.ALBUM);
    var aNode = document.createTextNode("PLAY");
    ntrack.node.appendChild(aNode);
    return ntrack;
    });
    results.appendChild(list.node); 
});