订阅者(对于自定义事件）不存在.骨干.js

subscriber (for a custom event) doesn't exist. backbone.js

本文关键字：事件 不存在 骨干 js 自定义      更新时间：2023-09-26

>我的应用程序中有HeaderView视图。根据触发的路由，视图将获得自定义标题。视图已订阅headerview:titleChanged事件。

标题视图.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();

at router.js， _routeHandlers.renderDefaultContentRegion（）

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

问题是首先创建路由器，然后创建标头视图，因此没有headerview:titleChanged收件人。

是否可以在触发默认路由之前渲染HeaderView？我该如何处理？

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/

相关文章：