0

我的应用程序中有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; }
});

在路由器.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是否可以在默认路由被触发之前渲染？我该如何处理？

4

1 回答 1

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/

于 2013-09-14T16:49:51.190 回答