Emberjs：在HTML5音频“结束”事件上触发Emberjs事件(Emberjs: Trigger an Emberjs event on HTML5 Audio “ended” event)

目前，我们在Ember.js应用程序中播放了一个音频元素。

恩伯版：

//RC3, Ember Data revision 12.

当前歌曲结束时，我们正试图让下一首歌加载。

目前，当我们点击“下一步”按钮时，下一首歌会加载。这是如何设置的。

路线：

http://localhost:3000/#/player

路由器映射：

App.Router.map(function() { this.resource('songs', function() { this.resource('song', { path: ":song_id" }); }); // the player's route this.route('player'); // Route that redirects back to player so player can load the new song. this.route('loading-next-song'); });

自定义事件

App = Ember.Application.create({ customEvents: { 'ended': "ended" } });

观点：

// surrounds "next" button, works. App.NextSongView = Ember.View.extend({ click: function() { this.get('controller').send('setNextSong'); } }); // surrounds the player, only the click works. App.NextSongOnEndedView = Ember.View.extend({ ended: function() { console.log("song ended"); // doesn't fire. }, click: function() { console.log("tests that other events work"); // fires. } })

PlayerRoute处理程序具有setNextSong事件

App.PlayerRoute = Ember.Route.extend({ model: function() { //Gets SongsController var songsController = this.controllerFor("songs"); // Gets Current Song return App.Song.find(songsController.get("currentSong")); }, events: { setNextSong: function() { // Fires the "setNextSong" method on the Songs Controller this.controllerFor('songs').send('setNextSong'); // redirects to "loading-next-song" route which // redirects immediately back to player. (so it can reload) this.transitionTo('loading-next-song'); } } });

歌曲控制器：具有setNextSong方法。

App.SongsController = Ember.ArrayController.extend({ currentSong: 1, index: 0, setNextSong: function() { // loads the next song. var newIndex = (this.get("index") + 1); this.set("currentSong", this.objectAt(newIndex).get("id")); this.set("index", newIndex); } });

因此点击事件会触发，因此我们可以触发下一首歌曲加载。但是我们希望当前歌曲结束时自动加载下一首歌曲，而不必点击下一步按钮。

在控制台中，播放器加载后，这有效：

$('audio').on('ended', function() { $('button').trigger('click'); //sends 'setNextSong' to the proper controller });

是否有可能让HTML5音频“已结束”事件触发Ember.js事件？或者有更好的方法可以自动播放Ember中的下一首歌吗？

谢谢您的帮助。

Currently, we have an audio element playing in our Ember.js app.

Ember Version:

//RC3, Ember Data revision 12.

We're trying to get the next song to load when the current song ends.

Currently, the next song loads when we click the "next" button. Here's how that is set up.

The Route:

http://localhost:3000/#/player

The Router Mapping:

App.Router.map(function() { this.resource('songs', function() { this.resource('song', { path: ":song_id" }); }); // the player's route this.route('player'); // Route that redirects back to player so player can load the new song. this.route('loading-next-song'); });

The custom event

App = Ember.Application.create({ customEvents: { 'ended': "ended" } });

The Views:

// surrounds "next" button, works. App.NextSongView = Ember.View.extend({ click: function() { this.get('controller').send('setNextSong'); } }); // surrounds the player, only the click works. App.NextSongOnEndedView = Ember.View.extend({ ended: function() { console.log("song ended"); // doesn't fire. }, click: function() { console.log("tests that other events work"); // fires. } })

The PlayerRoute handler Has the setNextSong event

App.PlayerRoute = Ember.Route.extend({ model: function() { //Gets SongsController var songsController = this.controllerFor("songs"); // Gets Current Song return App.Song.find(songsController.get("currentSong")); }, events: { setNextSong: function() { // Fires the "setNextSong" method on the Songs Controller this.controllerFor('songs').send('setNextSong'); // redirects to "loading-next-song" route which // redirects immediately back to player. (so it can reload) this.transitionTo('loading-next-song'); } } });

The Songs Controller: Has the setNextSong method.

App.SongsController = Ember.ArrayController.extend({ currentSong: 1, index: 0, setNextSong: function() { // loads the next song. var newIndex = (this.get("index") + 1); this.set("currentSong", this.objectAt(newIndex).get("id")); this.set("index", newIndex); } });

So the click events fire, so we can trigger the next song loading. However we would like the next song to load automatically when the current song ends, without having to click the next button.

In the console, after the player loads, this works:

$('audio').on('ended', function() { $('button').trigger('click'); //sends 'setNextSong' to the proper controller });

Is it possible to have an HTML5 audio "ended" event trigger an Ember.js event? Or is there a better way to automatically play the next song within Ember?

Thanks for the help.

最满意答案

编辑：只是为了显示小提琴中使用的方法：

App.NextSongOnEndedView = Ember.View.extend({ // hook in here and subscribe to the ended event didInsertElement: function() { var self = this; var player = this.$('audio')[0]; player.addEventListener('ended', function(event) { console.log("ended song"); self.get('controller').send('setNextSong'); }); }, //remove listener when removed from DOM to avoid memory leaks willDestroyElement: function(){ var player = this.$('audio')[0]; player.removeEventListener('ended'); } });

我还添加了一个工作小提琴来展示这个概念： http ： //jsfiddle.net/intuitivepixel/AywvW/18/

在Ember.js中，您可以在此处定义customEvents（ http://emberjs.com/guides/understanding-ember/the-view-layer/#toc_adding-new-events ），这是在Ember.js中创建自定义事件的示例：

申请级别

App = Ember.Application.create({ customEvents: { // player event 'ended': "myCustomEvent" } });

myCutomEvent是您仍需要创建的方法。

如果您的应用程序没有更多特定路由，则应用程序路径级挂钩仅在ApplicationRoute中。

App.ApplicationRoute = Ember.Route.extend({ events: { // Note: if nothing stops the event from bubbling it will end up here. myCustomEvent: function() { this.controllerFor('songs').send('setNextSong'); } } });

特定的路由级别但是如果你有一个NextSongRoute定义，那么钩子应该更方便地放在那里，例如：

App.NextSongRoute = Ember.Route.extend({ events: { myCustomEvent: function() { this.controllerFor('songs').send('setNextSong'); } } });

希望能帮助到你

EDIT: Just to show the method used in the fiddle:

App.NextSongOnEndedView = Ember.View.extend({ // hook in here and subscribe to the ended event didInsertElement: function() { var self = this; var player = this.$('audio')[0]; player.addEventListener('ended', function(event) { console.log("ended song"); self.get('controller').send('setNextSong'); }); }, //remove listener when removed from DOM to avoid memory leaks willDestroyElement: function(){ var player = this.$('audio')[0]; player.removeEventListener('ended'); } });

I've added also a working fiddle just to show the concept: http://jsfiddle.net/intuitivepixel/AywvW/18/

In Ember.js you can define customEvents see here (http://emberjs.com/guides/understanding-ember/the-view-layer/#toc_adding-new-events), example for creating a custom event in Ember.js:

Application level

App = Ember.Application.create({ customEvents: { // player event 'ended': "myCustomEvent" } });

myCutomEvent is a method you still have to create.

Application Route level hook only in the ApplicationRoute if you don't have more specific Routes for your application.

App.ApplicationRoute = Ember.Route.extend({ events: { // Note: if nothing stops the event from bubbling it will end up here. myCustomEvent: function() { this.controllerFor('songs').send('setNextSong'); } } });

Specific Route level but if you have for example an NextSongRoute defined then the hook should be placed more conveniently there, e.g.:

App.NextSongRoute = Ember.Route.extend({ events: { myCustomEvent: function() { this.controllerFor('songs').send('setNextSong'); } } });

hope it helps

更多推荐