[英]Why audio events are not firing with BackboneJS but others are?
I don't understand why the click
events are firing ok but not the timeupdate
one. 我不明白为什么click
事件是正常的,但不是timeupdate
。
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. 没有事件从<audio>
,我尝试使用canplay,播放,暂停,timeupdate,...如果我在模板中显示控件,如果我点击播放器,则会click .audio
事件。
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 . Backbone在内部转换事件对象并通过委托绑定事件 。 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. [...]这仅适用于可委托事件:不在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);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.