Backbone pubsub - 页面加载时未在默认路由内触发的全局事件答案

【问题标题】：Backbone pubsub - global event not triggering inside default route on page loadBackbone pubsub - 页面加载时未在默认路由内触发的全局事件
【发布时间】：2014-06-25 21:17:26
【问题描述】：

我已经创建了一个带有 Backbone 的 pubSub 对象，如下所示：

App.Vent = _.extend({}, Backbone.Events);

我还创建了一个路由器，它在默认 uri 上触发一个全局事件：http://localhost/

App.Router = Backbone.Router.extend({
    routes: {
        '': 'default',
    },

    default: function() {
        App.Vent.trigger('contactsTable:show');
    }
});

App.Views.ContactsTable = Backbone.View.extend({

    tagName: 'ul',

    initialize: function() {
        App.Vent.on('contactsTable:show', this.updateApp, this);
    },

    updateApp: function() {
        console.log( 'Show All Contacts' );
    }

});

new App.Router;
Backbone.history.start();
new App.Views.ContactsTable;

方法default被成功调用，但事件(contactsTable:show)在方法内不被触发。

但是，如果我最初加载页面时说：http://localhost/#contacts，然后从那里导航回http://localhost/，事件确实会在路由器方法内触发。

我不知道为什么会这样。我需要在默认路由上触发一个事件，无论它是否是打开应用程序时的第一条路由。

【问题讨论】：

你怎么知道事件没有被触发？您确定要在调用default 路由器之前绑定您的侦听器吗？
谢谢你，你说对了。我在实例化路由器并调用Backbone.history.start()之前绑定了监听器。

标签： javascript backbone.js underscore.js publish-subscribe

【解决方案1】：

App.Vent 中似乎没有任何内容绑定到“contactsTable:show”，请添加以下行并检查您是否在控制台中看到该消息。

App.Vent.bind("contactsTable:show", function(){
    console.log('Inside - contactsTable:show');
});

【讨论】：

我已更新我的问题以显示我正在使用的视图，该视图显示了我的应用程序是如何监听事件的。
请将 Vent.on 更改为 Vent.bind App.Vent.bind('contactsTable:show', this.updateApp, this);
在监听事件时使用bind而不是on有什么好处或理由？

【解决方案2】：

为了回答我自己的问题，我的问题是 router 和 Backbone.history.start() 在我看来是在绑定事件侦听器之前被调用的。

发生这种情况是因为我的视图（包含侦听器）正在在 AJAX 请求的回调函数中进行实例化，并且在服务器返回响应之前执行了 Router 和 Backbone.history.start() .

这是我定义模型、视图集合和路由器后的工作代码：

var contactsCollection = new App.Collections.Contacts();
contactsCollection.fetch().then(function() {

    var contactsTableView = new App.Views.ContactsTable({
        collection: contactsCollection
    });

    new App.Router;
    Backbone.history.start();

});

我视图中的侦听器现在响应初始页面加载时的事件。

【讨论】：