javascript-events - Backbone - 视图事件对象中的自定义事件

Question

我试图弄清楚为什么会这样：

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');

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

Answer 1

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

在这里阅读更多

Answer 2

骨干事件哈希与 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);