Emberjs：觸發HTML5上的Emberjs事件音頻「已結束」事件

Question

目前，我們在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中的下一首歌曲？

感謝您的幫助。

Answer 1

編輯：只是爲了顯示在小提琴所用的方法：

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

希望它有助於