2016-08-02 3 views
2

私は何時間も検索して試しましたが、これについては何の解決策も思いつきませんでした。メテオ購読準備ができていません

私は、YouTubeの曲をサーバーで再生する音楽アプリケーションを作成しています。サムネイルをダウンロードしてcfs:collectionに保存しています(後でガウスぼかしが必要なため)。

私は方法は、以下のようになります。公開:

Meteor.publish('currentSong', function() { 
    return [Playlist.find({'position': 0}), Thumbnails.find()]; 
}); 

私は、現在の曲のサムネイルのみを公開したバージョンを持っていたが、それはさらに多くの問題を引き起こしました。

私のテンプレートonCreatedメソッドで私はそれを(他の様々なものの中で)購読します。私はthis.autorun()メソッド内とその外側の両方で試しました。

Template.controlpanel.onCreated(function() { 
    // subscribe to the publications 
    Meteor.subscribe('currentSong'); 
    Meteor.subscribe('status'); 
}); 

そして私が実際に<img src="<url>" />コンテキスト内でそれを表示するサムネイルのURLを取得するテンプレートヘルパーを持っている:

getThumbnail: function() { 
    if(Template.instance().subscriptionsReady()){ 
     var thumbnail = this.thumbnail.getFileRecord(); 
     if(!$.isEmptyObject(thumbnail)){ 
      return thumbnail.url({'store': 'Thumbnail'}); 
     } 
    } 
} 

私はいくつかのより多くのコードのために頼まれたので、ここからの抜粋です実際のテンプレート

{{#with currentSong}} 
<div id="ThumbnailDisplay">  
    <img src="{{getThumbnail}}" alt="{{title}} Thumbnail" id="thumbnail"> 
</div> 
{{/with}} 
currentSongのみ次のスキーマを聞いて、1つのデータベースエントリを返し

ここ
PlaylistSchema = new SimpleSchema({ 
    title: { 
     type: String, 
     label: "titlename" 
    }, 
    url: { 
     type: String, 
     label: "titleurl" 
    }, 
    duration: { 
     type: Number, 
     label: "duration" 
    }, 
    file: { 
     type: String, 
     label: "filepath", 
     optional: true 
    }, 
    position: { 
     type: Number, 
     label: "postion" 
    }, 
    // id to the Thumbnail CFS Collection object 
    thumbnail: { 
     // type: String, 
     type: FS.File, 
     label: "thumbnail" 
    } 
}); 

あなたが見ることができる、{{#with currentSong}}の文脈でそのthis.thumbnailはサムネイルとそのガウスぼかしバージョンの両方を格納FS.Fileオブジェクトを参照します。

問題は、テンプレートが既に読み込まれていて、ある曲から別の曲に切り替わっているときに問題なく動作するということです。しかし、プレイリストに曲がない場合、表示部分は見えなくなります(テンプレートは技術的にレンダリングされますが、すべての情報は{{#with currentSong}}ブロック内にあります)。そして、曲を挿入すると、ディスプレイが「ポップアップ」し、サムネイルを除くすべてが表示されます(ソングタイトル、デュレーションスライダなど)。ページをリロードすると、そのページが表示されます。

私はこのコレクションを購読しています。私は天気をチェックして、サブスクリプションが準備されているか、まだ動作していません。

私はonCreatedコンテキストで購読する私のアプリケーションには他にもいくつかの部分がありますが、setTimeout (function(), 100)を使用する必要があります。それ以外の場合、データはまだ利用できません。

問題が画面の前にある、私が何かを見逃している、またはMeteorの購読を完全に理解していない、あるいは反応しているかどうかはかなり確信しています。しかし、私はそれを取得しません。あなたは助けていただければ幸いです。

注意すべき点は、iron-routerとその機能を認識していることです。私は私の別のプロジェクトでそれを使用しました。しかし、このアプリはルートを一切必要としない唯一の1ページアプリケーションです。だから私はそれを使用して拘束したいと思います。

+0

おそらく、私たちが問題を見つけるためにもう少しコードを表示する必要があります。具体的には、配列内の2つの異なるカーソルの(奇妙な...)パブリケーションからどのように取得するのですか? –

+0

私はあなたにいくつかのコードを与えるために質問を編集しました。私はこれが役立つことを願っていますあなたは出版物のどの部分を奇妙に感じますか?そしてそれを行う適切な方法は何でしょうか? – JHolub

+0

コンソールに何かエラーがありますか?これらのケースでは、変数が定義されていないため、クライアントがエラーによって処理を停止していることがあります。 getFileRecord()が呼び出された時点でthis.thumbnailが定義されていない可能性があります。 –

答えて

1

もう少し周りを再生した後、基本的にサブスクリプションは準備ができていますが、CollectionFSファイルはありません。

私の解決策は、テンプレートを最初にレンダリングするときを除いて常に効果的な正しいURLを反応的に設定するヘルパーです。

問題を解決するには私は、曲が変わるたびにイメージを変更するオートラン機能を持っています。

this.autorun(function() { 
    if(this.subscriptionsReady()){ 
     var currentSong = Playlist.findOne({'position': 0}); 
     if(currentSong){ 
      var thumbnail = currentSong.thumbnail.getFileRecord(); 
      $('#thumbnail').attr('src', thumbnail.url()); 
     } 
    } 
}.bind(this)); 

これはおそらく理想的な解決策ではありませんが、機能します。何らかの理由で、subscriptionReadyとCollectionFSがうまく連携していないようです。

関連する問題