Question

在我的应用中，我的区域为header，content，footer - 在登录页面上，我不想使用{{1 }和header。为此，在footer我删除了我不想要的区域。

但我收到的错误是：onRender。

这是我的模板:(我用玉）

Cannot read property 'empty' of undefined

这是我的layout.js：

div#wrapper
        script(type='text/template', id="appTemplate")
            div#header
            div#content
            div#footer
        script(type='text/template', id="loginTemplate")
            div this is login template

这是我的controller.js

socialApp.AppLayout = Backbone.Marionette.LayoutView.extend({
        el:'#wrapper',
        template:'#appTemplate',
        regions: {
            header : '#header',
            content : '#content',
            footer : '#footer'
        },

        onRender : function () {
            this.removeRegion("header", "#header"); //i am removing header alone here.
        }
    });

但它一切都行不通。有人帮我正确的方法吗？

Answer 1

您应该永远手动调用带有on前缀的方法。那些代码可以响应给定的事件，在这种情况下调用了视图的render方法。

我建议您不要尝试删除然后重新添加区域，而是创建两种不同的布局。然后，当您的路由器点击login路由时，您将LoginLayout呈现到应用的根区域，对于其他路由，则呈现“正常”布局。以下是我解决类似问题的方法：

<强> app.js：

var App = new Marionette.Application;
App.addRegions({ root: '#acme' });

// Instantiate User model
App.addInitializer(function()
{
    this.user = new UserModel;
});

// Render App layout
App.addInitializer(function()
{
    this.layout = this.user.get('id') ? new ContentLayoutView({ identifier: 'content' }) : new UserLayoutView({ identifier: 'user' });
    this.root.show(this.layout);

    // And let the routers decide what goes in the content region of each layout
    this.router = {
        content: new ContentRouter,
        user: new UserRouter
    };
});

<强>布局/ content.js

var ContentLayout = Marionette.LayoutView.extend(
{
    identifier: 'content',
    template: ContentLayoutTemplate,

    regions: {
        content: '[data-region="content"]',
        panelLeft: '[data-region="panel-left"]',
        panelRight: '[data-region="panel-right"]'
    },

    initialize: function()
    {
        this.content.once('show', function(view)
        {
            this.panelLeft.show(new PanelLeftView);
            this.panelRight.show(new PanelRightView);
        }.bind(this));
    }
});

<强>布局/ user.js的

var UserLayout = Marionette.LayoutView.extend(
{
    identifier: 'user',
    template: UserLayoutTemplate,

    regions: {
        content: '[data-region="content"]'
    }
});

<强>路由器/ content.js

var ContentRouter = Marionette.AppRouter.extend(
{
    routes: {
        '(/)': '...'
    },

    createLayout: function(callback)
    {
        if(App.root.currentView.options.identifier != 'content')
        {
            var layout = new ContentLayoutView({ identifier: 'content' });
            this.region = layout.content;
            this.listenTo(layout, 'show', callback);
            App.root.show(layout);
        }
        else
        {
            this.region = App.root.currentView.content;
            callback();
        }
    },

    execute: function(callback, args)
    {
        if(App.user.get('id'))
        {
            this.createLayout(function()
            {
                callback.apply(this, args);
            }.bind(this));
        }
        else
            App.router.user.navigate('login', true);
    }
});

<强>路由器/ user.js的

var UserRouter = Marionette.AppRouter.extend(
{
    routes: {
        'login(/)': 'showLogin',
        'logout(/)': 'showLogout'
    },

    createLayout: function(callback)
    {
        if(App.root.currentView.options.identifier != 'user')
        {
            var layout = new UserLayoutView({ identifier: 'user' });
            this.region = layout.content;
            this.listenTo(layout, 'show', callback);
            App.root.show(layout);
        }
        else
        {
            this.region = App.root.currentView.content;
            callback();
        }
    },

    execute: function(callback, args)
    {
        this.createLayout(function()
        {
            callback.apply(this, args);
        }.bind(this));
    },

    showLogin: function()
    {
        var LoginView = require('view/detail/login');
        this.region.show(new LoginView);
    },

    showLogout: function()
    {
        var LogoutView = require('view/detail/logout');
        this.region.show(new LogoutView);
    }
});

木偶 - 在“removeRegions”上抛出错误如何解决它

1 个答案: