CODEWITHSUNDEEP
spotify
AndyElastacloud
AndyElastacloud

Reputation: 654

Spotify preview app List view getItem

I'm using the v1.0 preview of Spotify's Apps API. When trying to create a custom List by supplying the opt_options parameter of List.forPlaylist(list, opt_options), I get errors regarding DOM elements not found. This is almost certainly due to my naive implementation.

My question is does anyone have an example of how to use this opt_options with a custom getItem function? The documentation isn't clear on what I am meant to return or populate.

My implementation (in which playlist is a loaded list):

listView.forPlaylist(playlist, { getItem : function (item, index) {
            console.log(item);
            console.log(index);
            return $("<span>hello, world</span>");
        }
    }

This errors every time:

DOMException code: 8 message: "NOT_FOUND_ERR: DOM Exception 8" name:
"NOT_FOUND_ERR" stack: "Error: An attempt was made to reference a Node
in a context where it does not exist.?    at f.createItems
($views/scripts/list/view.js:16:147)?    at e.b
($views/scripts/list.js:16:102)?    at e.Observable.dispatchEvent
($api/scripts/models.js:4:322)?    at Promise.f.snapshot
($views/scripts/list/model.js:9:244)?    at Promise.done
($api/scripts/models.js:6:157)?    at f.snapshot
($views/scripts/list/model.js:7:241)?    at e.more
($views/scripts/list.js:4:138)?    at f.moreWithLimit
($views/scripts/list/model.js:17:127)?    at f.checkResizeEdge
($views/scripts/list/view.js:13:457)?    at f.init.b
($views/scripts/list/view.js:3:3)"

Any thoughts welcome. An example, even more so ;-)

Upvotes: 1

Views: 248

Answers (1)

Jos&#233; M. P&#233;rez
Jos&#233; M. P&#233;rez

Reputation: 3279

You should return a DOM element, not a jQuery object. For that, you need to return 

$("<span>hello, world</span>")[0];

instead of returning 

$("<span>hello, world</span>");

You have more information about the difference between them on jQuery object and DOM element.

Here you have a complete example of how you would inject a List view in your Spotify app:

require([
  '$api/models',
  '$views/list#List'
], function (models, List) {
  'use strict';

  var playlist = models.Playlist.fromURI('spotify:user:nowplaylist:playlist:6QHyDeqaPNZ0nyLFJbSKTL');
  var listView = List.forPlaylist(playlist, {
    getItem : function (item, index) {
        console.log(item);
        console.log(index);
        return $("<span>hello, world</span>")[0];
    }
  });

  document.body.appendChild(listView.node);
  listView.init();
});

Upvotes: 1

Related Questions