2012-07-12 16 views
2

我不明白爲什麼click事件發射好,但不是timeupdate之一。爲什麼音頻事件不是用BackboneJS發射的,但其他的是?

沒有事件從<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); 
}) 

模板:

<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> 

回答

11

骨幹內部轉換的事件對象和binds the events by delegation。這意味着,

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

結束的

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

但有一個問題:

使用事件代表團效率。 [...]這僅適用於 可委派的事件:不重點,模糊,不會更改,提交,並在Internet Explorer中重置 。

而且它會出現音頻事件不可委派。

但是,設置直接回調做的工作,例如,你可以通過

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

感謝的解決方案和明確的解釋代替你的初始化函數。 – Matthieu 2012-07-13 12:51:43

+0

確實,謝謝@nikoshr的澄清。將按鍵事件綁定到我的'el' div之外的輸入框時,我也遇到了問題(如果我把它放在裏面,它就會起作用)。 大多數示例只是建議使用'$('#your-div').presspress(this.your_event)',但我想知道*爲什麼'events:{}'方法不起作用。現在我明白了。 – 2015-06-10 04:41:20

相關問題