Ember JS - コンポーネントと工場

Question

私はEmber JSの新機能です。私が使用している最初のフレームワークであることを認める必要があります。

私は設計上の問題に直面しています。私はいつでもオーディオを再生する必要があるオーディオWebアプリケーションを作成したいので、私はAudioPlayerシングルトンをアプリケーションの全ライフタイムで利用できるようにしたいと考えています。これはアイデアだと思い

applicationInstance.lookup('audio:player'); // For example 

、：

経由Dependency Injectionにエンバーのマニュアルによると、私はただ、デフォルトでシングルトンとして登録されている工場を登録することができ、私はすべての時間で、それをアクセスすることができましたしかし、私はまた、再生、一時停止、停止のようなノブで、オーディオプレーヤーのためのインターフェイスが必要です。 HTMLですそれは可能ですか？工場のビューを作るには？

私が見る第二の可能性がaudio-playerコンポーネントを行っているが、コンポーネントと、私はシングルトンを放棄しなければならない、と私は本当にだけでもAudioContextの所有者になり、サイト、上のちょうど1 audioplayerをしたいですこれはサイトごとに1回だけ必要です。

So.私は何をすべきか？私は工場やモデルと一緒に行くべきですか？

---

PS：私はコントローラが必要であることを考えるようにしたいが、私はそれがすぐに廃止されることですエンバーJSガイドで読みました。

Answer 1

すぐにあなたのために何かを実装しました。これは@Deewendraのコメントを拡大します。アプリは2つの類似した部分で構成されています。

サービスディレクトリ内のオーディオプレーヤーサービス

export default Ember.Service.extend({ 
    ids: [0,1,2,3,4,5,6,7,8,9,10], 
    songs: Ember.computed('ids',function(){ 
    return this.get('ids').map(id => { 
     return { id: id, title: `Awesome Song ${id}`} 
    }) 
    }), 
    currentlyPlaying: '', 
    currentIndex: 0, 
    currentStatus: 'stopped', 

    start() { 
    this.setSongByIndex(); 
    this.set('currentStatus','playing'); 
    }, 
    stop(){ 
    this.set('currentStatus','stopped'); 
    }, 
    nextSong() { 
    let maxIndex = this.get('ids.length') - 1; 
    let currentIndex = this.get('currentIndex'); 
    let nextIndex = currentIndex + 1; 

    if (nextIndex > maxIndex) { 
     this.stop(); 
    } else { 
     this.set('currentIndex',nextIndex); 
     this.setSongByIndex(); 
    } 
    }, 
    previousSong() { 
    let maxIndex = this.get('ids.length') - 1; 
    let currentIndex = this.get('currentIndex'); 
    let prevIndex = currentIndex - 1; 

    if (prevIndex < 0) { 
     this.stop(); 
    } else { 
     this.set('currentIndex',prevIndex); 
     this.setSongByIndex(); 
    } 
    }, 
    setSongByIndex() { 
    const songs = this.get('songs'); 
    const currentIndex = this.get('currentIndex'); 
    this.set('currentlyPlaying',songs[currentIndex]); 
    } 
}); 

Ember.inject.service（）メソッドを使用してサービスに接続されているオーディオプレーヤー成分

// components/audio-player.js 
export default Ember.Component.extend({ 
    audioPlayer: Ember.inject.service('audio-player'), 
    actions: { 
    start() { 
     this.get('audioPlayer').start(); 
    }, 
    stop() { 
     this.get('audioPlayer').stop(); 
    }, 
    next(){ 
     this.get('audioPlayer').nextSong(); 
    }, 
    previous(){ 
     this.get('audioPlayer').previousSong(); 
    } 
    } 
}); 

// templates/components/audio-player 
Song Title: {{audioPlayer.currentlyPlaying.title}} <br/> 
Audio Player Status: {{audioPlayer.currentStatus}} <br/> 
<button {{action 'start'}}>Start</button> | 
<button {{action 'next'}}>Next</button> | 
<button {{action 'previous'}}>Previous</button> | 
<button {{action 'stop'}}>Stop</button> | 

。

あなたが見るように、プレイヤーの「状態」はサービス内にあり、コンポーネントはhtml/handlebarsテンプレートとテンプレートの名前に相当するjavascriptファイル"ビュー"（テンプレート）と "状態"（サービス）の間の対話を処理します。

ここをクリックして実験したtwiddleです。

「フレームワーク」以外のプログラミング、ウェブ技術などに関するあなたの経験は何か分かりませんし、これを2回提出することを考えましたが、それは傷つける以上のものに役立つはずです。