初始化后,牵牛花区域未定义

时间:2014-02-04 19:53:37

标签: javascript backbone.js marionette

错误仅在特殊路由环境下发生,当路由器在不同控制器中处理登录并由全局事件机制在此路由后调用布局(请参阅gist链接)时。

只要重用现有会话并且没有处理登录,一切都很好。

this gist中的主要代码(第113行的错误“this.headerRegion”未定义

来自登录和路由器的gist模块的代码块......

        loginSuccess: function (user) {
            vent.trigger('user:login'); //notify all widgets we have logged in
            app.router.navigate('home', { trigger: true });
        }
...

    return marionette.AppRouter.extend({
        routes: {
            'home' : 'home',
...
        },

        home: function() {
            this._showPage('home');
        },

...
        _showPage: function (pageName, options) {
            console.log("RouterShow " +pageName);
            var that = this;
            //make sure we are authenicated, if not go to login
            if (!Parse.User.current())
                pageName = 'login';

            require(['./pages/' + pageName + '/Controller'], function (PageController) {
                if (that.currentPageController) {
                    that.currentPageController.close();
                    that.currentPageController = null;
                }
// line below loads the layout in the gist link
                that.currentPageController = new PageController(options);

                that.currentPageController.show(app.regionMain)
                    .fail(function () {
                        //display the not found page
                        that.navigate('/not-found', { trigger: true, replace: true });
                    });

            });
        }
...

define([
    'marionette',
    './Layout',
    'app'
], function (
    Marionette,
    Layout,
    app
) {
    'use strict';

    return Marionette.Controller.extend({
        show: function (region) {
            var that = this, d = new Marionette.$.Deferred();
            region.show(new Layout({ }));  //this layout in gist link
            return d.promise();
        }
    });
});
在上面的块末尾附近的

pageController.show()调用gist中的布局区域

要重新创建仅在登录后发生的错误,我会执行以下操作:

在要点的第57行显示复合视图#1。

点击要点第40行的复合视图#1点火事件(' roleList:getuser '),

将新视图#2交换到用于第113,114行的第一个视图的现有区域

113处的错误,“this.headerRegion”在布局中不再存在!

讨论 - 现在IMO Layout扩展了Marionett.ItemView,并且从源代码开始,它应该始终在调用init之前定义区域。构造函数检查要点的第23行的undef“this.headerRegion”。

我的代码重新实现了gist第18-23行中的超类构造函数,看起来总是定义“headerRegion”和“mainRegion”属性。但是,错误是:

  

未捕获的TypeError:无法调用未定义的方法'show'   Layout.js:113 Marionette.Layout.extend.getUserRelation

1 个答案:

答案 0 :(得分:1)

区域属性如' headerRegion'在你的情况下只在render()之后可用,而不仅仅是initialize()。来自木偶docs

  

一旦您渲染了布局,您现在可以直接访问所有布局   指定的区域作为区域经理。

在布局在gist外部的逻辑中呈现之前,您必须触发这些事件(' roleItem:getrole'等)。相反,如果你想以这种方式实现getUserRelation(),你需要先渲染。