API приложения Spotify: вкладки, обновление пользовательского интерфейса плейлиста - PullRequest
Новая
       4

API приложения Spotify: вкладки, обновление пользовательского интерфейса плейлиста

1 голос
/ 22 февраля 2012

Я создаю приложение Spotify с четырьмя вкладками.Содержимое всех вкладок загружается при начальной загрузке приложения.Каждая вкладка содержит один или несколько списков воспроизведения, которые заполняются данными из сторонних веб-интерфейсов сторонних производителей, которые преобразуются в спойт-треки.

Выбранная вкладка работает нормально.Плейлист показывает ожидаемый.Проблема с вкладками, которые изначально скрыты, но потом выбраны.Здесь список воспроизведения выглядит следующим образом:

не полностью воспроизведенный список воспроизведения

Глядя в Инспектор, я вижу, что содержимое еще не отображено: 

<div class="sp-list sp-light" tabindex="0">
 <div style="height: 100px; ">
 </div>
</div>

Когда я изменяю размеры приложения Spotify для настольного компьютера, список воспроизведения наконец отображается:

воспроизводится список воспроизведения после изменения размера

Для заполнения списка воспроизведения, который я использую«стандартные» модели и представления: 

var playlist = new views.List(tempPlaylist);
//where tempPlaylist is a new models.Playlist();
//that has been populated with tempPlaylist.add(search.tracks[0].uri);

playerPlaylistDiv.append(playlist.node);

Эта проблема возникает только при использовании вкладок.При отображении всего контента на одной длинной странице все списки воспроизведения полностью отображаются.Интересно, имеет ли это отношение к времени: что я скрываю контент, который еще не полностью отображен?Любые мысли приветствуются.

Я работаю с изменениями табуляции следующим образом: 

/* Handle URI arguments */
models.application.observe(models.EVENT.ARGUMENTSCHANGED, tabs);

/* Handle tab changes */
function tabs() {
  var args = models.application.arguments;
  // Hide all sections
  $('section').hide();

  // Show current section   
  $("#" + args[0]).show();
}

К вашему сведению Я использую предварительный просмотр Spotify 0.8.10.3.

Ответы [ 4 ]

0 голосов
/ 08 февраля 2013

Я думаю, что мне действительно удалось решить эту проблему, и я думаю, что это пуленепробиваемое.

По сути, я пытался решить эту проблему, пытаясь убедить API в том, что ему нужно перерисовать список воспроизведения, скрывая вещи / прокручиваявещи / движущиеся вещи, которые работали время от времени, но никогда последовательно.Мне никогда не приходило в голову изменить сам плейлист.Или, по крайней мере, заставьте API думать, что список воспроизведения изменился.

Вы можете сделать это, запустив событие в объект списка воспроизведения. 

var models = sp.require('$api/models');

...

// playlist is your Playlist object. Usually retrieved from models.Playlist.fromURI
playlist.notify(models.EVENT.CHANGE, playlist);

Это просто стандартные функции Spotify и обновления спискапотому что он думает, что что-то изменилось в списке воспроизведения.Надеюсь, это кому-нибудь поможет!

0 голосов
/ 18 марта 2012

Решение, которое я нашел, состоит в следующем:

Я обозначил его как проблему с отображением / скрытием содержимого, поскольку отображение полного содержимого без вкладок никогда не вызывает проблем.Поэтому вместо использования .show () /. Hide () я теперь скрываю и показываю содержимое, устанавливая высоту разделов равной 100% / 0: 

// Hide all other sections
$("section#" + args).siblings().height('0');

// Show current section
$("section#" + args).height('100%');

Не знаю, почему это работает, но этоделает (по крайней мере для меня).

0 голосов
/ 22 марта 2012

У меня была та же проблема (см. Объекты Spotify List, созданные из данных localStorage, отображаются пустыми ) и исправили их, выполнив hide () / show () из div перед любой обработкой.Ранее я создавал список воспроизведения, а затем показывал () элемент div, после которого получался пустой список.

0 голосов
/ 22 февраля 2012

Я не уверен, что это то же самое, но я столкнулся с похожими проблемами, пытаясь создать треклисты из playlist-uris на лету;также не мог отследить его ближе (содержащий DOM был, конечно, отрендерен и готов);и это произошло только в определенных плейлистах, но не в альбомах.

Мне удалось обойти эту проблему путем «клонирования» плейлиста - очевидно, есть хит «производительности» ... 

// assuming uri is the playlist's URI
models.Playlist.fromURI( uri, function(originalPlaylist) {
  var tempPlaylist = new model.Playlist(); 
  $.each(originalPlaylist.tracks, function(t) { tempPlaylist.add(t); });
  var tracklist = new views.List(tempPlaylist);
  // etc...
}

Я не уверен, что здесь происходит, но, возможно, это поможетВы вместе :)

PS.Кроме того - убедитесь, что у вас есть декларация doctype в index.html (), клиент spotify делает некоторые странные вещи, если вы этого не делаете.

...