È possibile aggiungere più elementi (o alterare in altro modo) alle voci in una visualizzazione "elenco" standardizzata in un'app Spotify?

Question

Quindi sto utilizzando l '"elenco dei brani standardizzato" in questa domanda su stackoverflow e che le linee guida indicano agli sviluppatori di utilizzare.

Posso rimuovere facilmente i campi da ogni voce nell'elenco delle tracce con css (solo visualizzare: nessuno, ecc.), e allo stesso modo alterare l'aspetto generale. Tuttavia, vorrei aggiungere un altro campo a ciascuna voce.

Ad esempio, vedi la funzione "Elenchi principali" nel tuo client Spotify (per me questo è il secondo elemento in APP). Questi elenchi sembrano per lo più come normali playlist (e ovviamente funzionano anche come tali), ma ogni elemento ha un numero accanto e il formato è leggermente diverso.

Sarebbe possibile farlo nella mia stessa applicazione, senza reinventare completamente la ruota?

Posso fare qualcosa come: $(".sp-list a").each(function(){$(this).append("foo")}) ma questo influenzerà solo le tracce attualmente visibili (ish). Se parte della playlist scorre fuori dalla visualizzazione, tali tracce non vengono modificate. Inoltre, se Spotify decide di ridisegnare una parte dell'elenco, cosa che accade (ad esempio, se scorro gli elementi interessati fuori dalla vista e riproduco una traccia), perdo la modifica. Quindi questo non è particolarmente valido / pulito.

Pensieri?

Answer 1

Mentre stavo incontrando Spotify oggi, ho posto loro questa domanda. Al momento non è possibile aggiungere elementi a list.node, ma hanno detto che esamineranno il "problema".

Fino ad allora dovrai aggiungere i tuoi elementi fuori da list.node, o potresti metterlo sopra (insieme a position: absolute;) oppure potresti metterlo prima o dopo (con float) se il tuo elemento dovrebbe esserela prima o l'ultima colonna.

Answer 2

Ormai è (più o meno) possibile;non molto bene ma comunque.Quindi solo per riferimento:

Eliminazione dei campi: Modifica del campo temporale in una playlist dell'app Spotify

Aggiunta di HTML:

//monkey-patch the views.Tracks class
var myTrackView = function (track) {
  views.Track.apply(this, arguments);
  this.node.appendChild($('<span>hi</span>')[0]);
}
myTrackView.prototype = views.Track.prototype;

//now tell the list to use this new class
var list = new views.List(playlist, function (track) {return new myTrackView(track)})
$('#playlist-placeholder').html(list.node)

Ora vedi il ciao apparire su ogni riga e si comporta come qualsiasi altra parte della playlist.

Ora, per salvare le informazioni extra che voglio mostrare, le aggiungo semplicemente all'oggetto track.data, in modo da poterle accedere da myTrackView.