主干.js 绑定到音频事件答案

【问题标题】：backbone.js bind to audio events主干.js 绑定到音频事件
【发布时间】：2013-06-03 17:34:28
【问题描述】：

怎么做？我搜索了 Stack Overflow，找到了一个类似的结果，但它不起作用。

这是我的代码：

var Player = Backbone.Model.extend({
    defaults: {
        //some variables
    },
    //creating audio element
    setAudio: function(ogglink, mp3link){
        //code, that works
    }
});     
var Playlist = Backbone.Collection.extend({ 
    model: Player
});
var MyPlaylist = new Playlist([ 
    //some songs here
]);    
var OneSongView = Backbone.View.extend({     
    //added some 'template' and 'el' code
    initialize: function () {
        this.model.bind("change", this.render, this);   
    },
    render: function (eventName) {
        $(this.el).html(this.template(this.model.toJSON()));
        this.model.setAudio(this.model.get("ogglink"), this.model.get("mp3link"));
        return this;
    },
    events: {
        //declaration of some events
    },
    //event functions
});    
var AppRouter = Backbone.Router.extend({
    //router code
});    
var app = new AppRouter();
Backbone.history.start();

如果我添加类似timeupdate:somefunc 的事件，它将不起作用，如果我添加类似here 的代码，我会出错:(

【问题讨论】：

哦，不记得完全重建的原因，只是不工作或者'this.$("audio")'不是一个函数......类似的东西
啊哈！这是因为，与您链接到的示例解决方案不同，在您的 render 方法触发之前，您不会设置 this.$el 的 HTML。在您这样做之前，您将无法在 this.$("audio") 上附加事件处理程序。

标签： backbone.js html5-audio backbone-events

【解决方案1】：

所有Backbone.View 事件处理程序都委托给视图的el。这意味着在视图内触发的任何事件都必须冒泡/传播到其el，然后您的处理程序才会捕获它们。

不幸的是，HTML5 音频和视频元素不会像大多数其他元素那样通过 DOM 向上传播它们的事件。处理这些事件的唯一方法是在将 <audio> 元素插入 DOM 后，将其直接添加到它。

【讨论】：