余烬JS -组件与工厂

Question

我对Ember JS非常陌生，我甚至不得不承认这是我使用的第一个框架。

井。我面临一个设计问题。我想做一个音频网络应用程序，它将在任何时候都需要能够播放音频，因此，我想使一个AudioPlayer单例，将在应用程序的整个寿命可用。

根据Ember在依赖注入上的文档，我只需注册一个工厂，在默认情况下该工厂被注册为单例，并且我可以一直通过以下方式访问它：

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

这似乎是一个想法，但我也需要一个接口的音频播放器，与旋钮，如播放，暂停和停止，即HTML。这有可能吗？为工厂做一个“视图”？

我看到的第二个可能性是制作一个audio-player组件，但是对于这个组件，我必须放弃单例，我真的只想在站点上只需要一个音频播放器，它也是AudioContext的所有者，每个站点只需要一次。

所以。我该怎么办？我是去工厂还是去模特？

PS:我想我需要一个控制器，但我在Ember JS指南中读到，它很快就会被废弃。

Answer 1

我很快为您实现了一些内容，它扩展了@Deewendra的评论。您将看到该应用程序由两个附加部分组成。

服务目录中的音频播放服务。

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

音频播放器组件

// 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> |

它通过使用Ember.inject.service()方法连接到服务。

如您所见，播放器的“状态”驻留在服务中，组件通过html/handlebar模板与其交互，再加上一个与模板名称等价的javascript文件，该文件将处理“view”(模板)和"state“(服务)之间的交互。

这是一个点击周围的转盘，并进行实验。

我不知道您在“框架”之外的编程方面有什么经验，在web技术等方面，并三思而后行，但我认为这应该比它所带来的伤害更大。