Блог

Главная - Вопросы по программированию - Магистральный pubsub — глобальное событие, не запускающееся внутри маршрута по умолчанию при загрузке страницы

Магистральный pubsub — глобальное событие, не запускающееся внутри маршрута по умолчанию при загрузке страницы

#javascript #backbone.js #underscore.js #publish-subscribe

#javascript #backbone.js #underscore.js #опубликовать-подписаться

Вопрос:

Я создал объект 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 ) внутри метода не запускается.

Однако, если я сначала загружаю страницу на say: http://localhost/#contacts , а затем перехожу обратно http://localhost/ оттуда, событие запускается внутри метода маршрутизатора.

Я не могу понять, почему это может быть. Мне нужно, чтобы событие запускалось на маршруте по умолчанию независимо от того, является ли это первым маршрутом при открытии приложения.

Комментарии:

1. Откуда вы знаете, что событие не запускается? Вы уверены, что привязываете своего слушателя до default вызова маршрутизатора?

2. Спасибо, вы были на правильном правильном вопросе. Я связывал прослушиватель перед созданием экземпляра маршрутизатора и вызовом Backbone.history.start() .

Ответ №1:

Похоже, в App.Vent ничего нет.Vent привязан к «contactsTable: show», пожалуйста, добавьте следующую строку и проверьте, видите ли вы сообщение в консоли.

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

Комментарии:

1. Я обновил свой вопрос, чтобы показать представление, которое я использую, которое показывает, как событие прослушивается в моем приложении.

2. Пожалуйста, измените Vent.on на Vent.bind App.Vent.bind(‘contactsTable:show’, this.updateApp, this);

3. В чем выгода или причина использования bind вместо on того, чтобы прослушивать события?

Ответ №2:

Чтобы ответить на мой собственный вопрос, моя проблема заключалась в том, что router и Backbone.history.start() вызывались до привязки прослушивателя событий, на мой взгляд.

Это происходило потому, что мой view (который содержит прослушиватель) создавался внутри функции обратного вызова AJAX-запроса, и Router and 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();

});

Слушатель внутри моего представления теперь реагирует на событие при начальной загрузке страницы.

Метки: