Question

I’m trying to add a field to the List provided by the Spotify API.

Here is my code to create the list:

var playList_view = new views.List(playlist_test, function(track) {
                return new views.Track(track, views.Track.FIELD.NAME | 
                                            views.Track.FIELD.ARTIST | 
                                            views.Track.FIELD.ALBUM);
            });

$('#tracks').append(playList_view.node);

I don’t know how to add it to the view through the function, so I’m adding it after the fact. If there is a better way to do this, please let me know.

Here is the attempt (which is partially successful):

$('.sp-list a').append("<span>Test</span>");

This correctly adds a column to the right of the other columns for all the tracks shown on the screen. The problem arises when I scroll down in the list. It appears to be getting refreshed and the html is rewritten. I think the solution here would be either to add the code to the function at view creation time, or observe some kind of change/refresh event. Unfortunately, I’m not sure what the events are or a good place to find a list of them.

Any help is appreciated!

Thanks,
Kevin

Answer 1

One way of doing this is to use a handler on the scroll event to detect that the list has been scrolled and then re-add the field. However, you need to be careful that it doesn’t end up adding it to rows which already have it added or you will end up with duplicated fields. This is something which seems to work:

function addCustomField() {
    $('.sp-list a.sp-item').each(function() {
        if($(".custom-field",$(this)).length == 0) // check field doesn't already exist
        {
            $(this).append("<span class=\"custom-field\">Test</span>");
        }
    });
}

setTimeout(function() {
    addCustomField(); // Add the custom field to the visible tracks
    $('.sp-list').scroll(addCustomField); // Register the scroll handler
},10);