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

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デフォルトルートが起動する前にレンダリングすることは可能ですか? どうすればそれを処理できますか？

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 に答える