Backbone - 视图事件对象中的自定义事件答案

【问题标题】：Backbone - Custom events in view events objectBackbone - 视图事件对象中的自定义事件
【发布时间】：2012-06-25 11:50:27
【问题描述】：

我想弄清楚为什么会这样：

var TestView = Backbone.View.extend({
    views: {},

    initialize: function(){
        this.bind('transistion:complete', this.onPageLoaded);

    },

    onPageLoaded: function(){
        alert("works!");
    }
});

var v = new TestView();
v.trigger('transition:complete');

但这不起作用：

var TestView = Backbone.View.extend({
    views: {},

    events:{
        'transition:complete': 'onPageLoaded'
    },

    onPageLoaded: function(){
        alert("works!");
    }
});

var v = new TestView();
v.trigger('transition:complete');

能够从视图的事件对象中触发我的自定义事件会更整洁。无论如何我可以让它工作吗？

【问题讨论】：

标签： javascript-events backbone.js

【解决方案1】：

events 哈希被指定用于 DOM 事件（如 click ），而通过 trigger 触发并通过 on 绑定的事件是 Backbone 的内部事件。所以当你去v.trigger('eventname')时，事件不是DOM事件，而是Backbone特有的。

阅读更多here

【讨论】：

【解决方案2】：

Backbone 事件哈希与 DOM 相关联，而不是与视图相关联。

检查如何将触发器运行到 View 元素中：

var TestView = Backbone.View.extend({

    events:{
        'transition:complete': 'onPageLoaded'
    },

    onPageLoaded: function(){
        alert("works!");
    }
});

var v = new TestView();
v.$el.trigger('transition:complete');

但是，如果自定义事件不需要绑定到元素，你的第一个代码是可以的，只需将 bind 替换为 on，如下所示：

this.on('transistion:complete', this.onPageLoaded);

【讨论】：