Spotify App API：タブページ、プレイリストUIの更新

Question

4つのタブページでSpotify Appを構築しています。すべてのタブのコンテンツは、アプリの初期読み込み時に読み込まれます。各タブには、サードパーティのWeb APIからのデータを取り込み、スポットトラックに解決された1つまたは複数のプレイリストが含まれています。

選択したタブは正常に動作します。プレイリストが表示されます。問題は最初は隠されていたが後で選択されたタブである。選択されたとき、ここでのプレイリストは、次のようになります

私は内容がまだレンダリングされていないことを確認することができインスペクタで探し

not fully rendered playlist

：

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

私はSpotifyはデスクトップアプリのサイズ変更を行うと、プレイリストは、最終的にレンダリングされます：

rendered playlist after resize

は、私が使用してプレイリストを移入するにはトン

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

タブを使用しているときにのみこの問題が発生しています。 1つの長いページにすべてのコンテンツを表示すると、すべてのプレイリストが完全にレンダリングされます。私はタイミングと関係があるのだろうか：まだ完全にレンダリングされていないコンテンツは隠しているのだろうか？どんな考えでも大歓迎です。

私はタブを扱うには、この方法を変更：

/* 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(); 
} 

はFYI私は、Spotifyはプレビュー0.8.10.3を使用しています。

Answer 1

私は、これは同じものであることを確認していないが、私はその場でプレイリストのURIからtracklistingsを作成しようとしている同様の問題に遭遇しました。 （それを含んでいるDOMは確かにレンダリングされ、準備が整っていました）。それは特定のプレイリストでのみ起こりました。アルバムで。

私は「クローニング」のプレイリストにより、この問題をcircumentventすることができました - 明らかに、「パフォーマンス」のヒットがあります...

// 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。また、index.html（）にdoctype宣言があることを確認してください。見つからない場合は、奇妙なことを行います。私が見つけた

Answer 2

解決策はこれです：

私は問題を起こしたことがないのタブなしで完全なコンテンツを示すため、コンテンツを表示/非表示の問題であることにそれをダウン矢印しました。だからではなく、/（）.SHOW使用しての）（非表示私は今隠して、100％/ 0へのセクションの高さを設定することにより、コンテンツを示しています。（

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

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

ないこの作業の理由を確認してください、それはありません私にとっては少なくとも）。

Answer 3

私は同じ問題を抱えていた（Spotify List objects created from localStorage data come up blankを参照）、いずれかの処理の前にdiv要素の非表示（）/ショー（）を実行して、それを修正しました。以前私はプレイリストを作成していましたが、その後divを表示して空リストにしました。

Answer 4

私は実際にこれを解決することができたと思うし、防弾だと思う。

基本的に私は、物事を隠す/スクロールする/時々動作するものを移動することによってプレイリストを再描画する必要があることを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は関数とリストが更新されています。これが誰かを助けることを願って！