2

clickイベントが正常に発生している理由はわかりませんが、発生していませんtimeupdate。

から発生するイベントはありません<audio>。canplay、play、pause、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>
4

1 に答える 1

11

バックボーンはイベントオブジェクトを内部的に変換し、委任によってイベントをバインドします。この意味は

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

として終了

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

しかし、落とし穴があります。

効率化のためにイベント委任を使用します。[...]これは、委任可能なイベントに対してのみ機能します。InternetExplorerでフォーカス、ぼかし、変更、送信、リセットはできません。

また、オーディオイベントは委任できないように見えます。

ただし、コールバックを直接設定することは機能します。たとえば、初期化関数を次のように置き換えることができます。

initialize: function() {
    this.$el.html(this.template(this.model.toJSON()));
    _.bindAll(this,'onTimeUpdate');
    this.$('.audio').on('timeupdate', this.onTimeUpdate);
}
于 2012-07-13T11:01:25.073 に答える