为什么音频事件不与BackboneJS射击，但其他人？ [英] Why audio events are not firing with BackboneJS but others are?

问题描述

我不明白为什么点击事件被触发确定，但不是 timeupdate 之一。

没有事件是由＆LT射击;音频＆GT; ，我试图与canplay，播放，暂停，timeupdate，...
如果我在模板中显示控件点击。音频如果我对玩家点击活动虽然会触发。

  VAR PlayerView = Backbone.View.extend（{
    标签名：'格'，    模板：_.template（$（'＃球员模板）HTML（）。）    初始化：功能（）{
        这$ el.html（this.template（this.model.toJSON（）））;
    }    事件：{
        timeupdate。音频'：'onTimeUpdate'，
        点击.btn_play'：'onClickPlay'，
        点击.btn_pause'：'onClickPause
    }，    onTimeUpdate：功能（）{
        的console.log（'运动员'+ this.model.get（'身份证'）+'：事件= onTimeUpdate'）;
    }，    onClickPlay：功能（）{
        的console.log（'运动员'+ this.model.get（'身份证'）+'：事件= onClickPlay'）;
    }，    onClickPause：功能（）{
        的console.log（'运动员'+ this.model.get（'身份证'）+'：事件= onClickPause'）;
    }，}）;
$（函数（）{
    VAR模型=新PlayerModel（{ID：1}）;
    VAR视图=新PlayerView（{'模式：模式}）;
    $（＃玩家）追加（view.el）。
}）
 

模板：

 ＆LT;脚本类型=文/模板ID =球员模板＆GT;
    ＆LT; D​​IV ID =播放器和LT;％= ID％GT;类=玩家＆GT;
        ＆LT;音频类=音频＆GT;
          ＆lt;信源SRC =＆LT;％= track_url％GT;键入=音频/ MP3/＆GT;
        ＆LT; /音频＆GT;
        ＆LT; D​​IV CLASS =控制＆GT;
            ＆LT;按钮类=btn_play＆GT;播放＆LT; /按钮＆GT;
            ＆LT;按钮类=btn_pause＆GT;暂停和LT; /按钮＆GT;
        ＆LT; / DIV＆GT;
    ＆LT; / DIV＆GT;
＆LT; / SCRIPT＆GT;
 

解决方案

主干内部转换的事件对象和绑定各代表团事件。这意味着

 事件：{
        timeupdate。音频'：'onTimeUpdate'，
        点击.btn_play'：'onClickPlay
}
 

作为结尾

 这$ el.delegate（timeupdate'，this.onTimeUpdate音频。'）。
这$ el.delegate（'。btn_play'，'点击'，this.onClickPlay）;
 

但有一个问题：

  

使用事件代表团效率。 [...]这仅适用于
  代表-能事件：不集中，模糊，并没有改变，提交和
  重置Internet Explorer中。

和它会出现音频事件不会委派-能。

但是，设置直接通过回调

做的工作，例如，你可以取代你的初始化函数

 初始化：功能（）{
    这$ el.html（this.template（this.model.toJSON（）））;
    _.bindAll（这一点，onTimeUpdate'）;
    这$（'音频。'）上（'timeupdate'，this.onTimeUpdate）。
}
 

I don't understand why the click events are firing ok but not the timeupdate one.

No event is firing from <audio>, I tried with canplay, play, pause, timeupdate, ... If I display the controls in the template a click .audio event will fire if I click on the player though.

var PlayerView = Backbone.View.extend({
    tagName : 'div',

    template: _.template($('#player-template').html()),

    initialize: function() {
        this.$el.html(this.template(this.model.toJSON()));
    }

    events: {
        'timeupdate .audio': 'onTimeUpdate',
        'click .btn_play': 'onClickPlay',
        'click .btn_pause': 'onClickPause'
    },

    onTimeUpdate: function () {
        console.log('player ' + this.model.get('id') + ' : event = onTimeUpdate');
    },

    onClickPlay: function () {
        console.log('player ' + this.model.get('id') + ' : event = onClickPlay');
    },

    onClickPause: function () {
        console.log('player ' + this.model.get('id') + ' : event = onClickPause');
    },

});


$(function(){
    var model = new PlayerModel({'id' : 1});
    var view = new PlayerView({'model' : model});
    $("#players").append(view.el);
})

The template :

<script type="text/template" id="player-template">
    <div id="player<%= id %>" class="player">
        <audio class="audio">
          <source src="<%= track_url %>" type="audio/mp3" />
        </audio>
        <div class="control">
            <button class="btn_play">Play</button>
            <button class="btn_pause">Pause</button>
        </div>
    </div>
</script>

解决方案

Backbone internally converts the events object and binds the events by delegation. This means that

events: {
        'timeupdate .audio': 'onTimeUpdate',
        'click .btn_play': 'onClickPlay'
}

ends as

this.$el.delegate('.audio','timeupdate', this.onTimeUpdate);
this.$el.delegate('.btn_play','click', this.onClickPlay);

But there's a catch:

Uses event delegation for efficiency. [...] This only works for delegate-able events: not focus, blur, and not change, submit, and reset in Internet Explorer.

And it would appear that audio events are not delegate-able.

However, setting directly the callbacks does work, for example you could replace your initialize function by

initialize: function() {
    this.$el.html(this.template(this.model.toJSON()));
    _.bindAll(this,'onTimeUpdate');
    this.$('.audio').on('timeupdate', this.onTimeUpdate);
}

这篇关于为什么音频事件不与BackboneJS射击，但其他人？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！