訂戶（用於自定義事件）不存在。 bone.js

Question

我的應用程序中有HeaderView視圖。 根據觸發的路線，視圖將獲得自定義標題。 該視圖已訂閱headerview:titleChanged事件。

headerview.js

var HeaderView = Backbone.View.extend({
    el: $('#header-region'),
    initialize: function() {
        bus.on('headerview:titleChanged', function(args) {
            this.setTitle(args.title);
        }, this);
        this.render();
    },
    setTitle: function(title) { this.$el.find('.title').html(title); },
    render: function() { return this; }
});

在router.js

var AppRouter = Backbone.Router.extend({
    initialize: function() { this.route('', 'defaultRoute'); }
});

// trying to create it before AppRouter even got initialized
new HeaderView();

var appRouter = new AppRouter();
appRouter.on('route:defaultRoute', function() { 
    _routeHandlers.renderDefaultContentRegion(); 
});

Backbone.history.start();

在router.js上，_routeHandlers.renderDefaultContentRegion（）

// trying to send message
bus.trigger('headerview:titleChanged', {title: 'heading text'});

問題是首先創建路由器 ，然后創建頭視圖 ，結果沒有頭視圖 headerview:titleChanged收件人。

是否可以在觸發默認路由之前渲染HeaderView ？ 我該如何處理？

Answer 1

HeaderView大概是應用程序的重要組成部分，因此應在應用程序啟動期間創建它，問題在於正確的順序。 您可以劫持AppRouter#initialize作為您的應用程序構造函數，並讓它在正確的時間創建HeaderView ：

var AppRouter = Backbone.Router.extend({
    initialize: function() {
        this.route('', 'defaultRoute');
        new HeaderView();
        bus.trigger('headerview:titleChanged', {title: 'heading text'});
    }

演示： http ： //jsfiddle.net/ambiguous/dpSbB/

或者，您可以將所有初始化移動到單獨的應用程序構造函數中，然后按正確的順序排列。 這也使您可以方便地放置全局事物（例如事件總線），而不必擔心會污染全局名稱空間。 像這樣：

var AppRouter = Backbone.Router.extend({
    initialize: function() {
        this.route('', 'defaultRoute');
    },
    //...
});

var app = {
    bus: _({}).extend(Backbone.Events),
    initialize: function() {
        new HeaderView;
        new AppRouter;
        app.bus.trigger('headerview:titleChanged', {title: 'heading text'});
        Backbone.history.start();        
    }
};

app.initialize();

演示： http ： //jsfiddle.net/ambiguous/eLyys/