木偶 - 上`removeRegions`拋出錯誤怎麼解決呢

Question

在我的應用程序，我有，各地區的header，content，footer - 在登錄頁面上，我不想使用header，並footer。爲此，在onRender我刪除了我不想成爲的地區。

但我收到一個錯誤說：Cannot read property 'empty' of undefined。

這裏是我的模板：（我用玉）

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 

這裏是我的layout.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. 
     } 
    }); 

這裏是我的controller.js

socialApp.loginController = Marionette.Controller.extend({ 
     _initialize:function(){ 
      this.loginView = new loginView({model:new loginModel}); 
      this.layout.onRender(); //calling onRender from here... 
      this.layout.content.show(this.loginView); 
     } 
    }); 

但它的全部不工作。任何一個請幫助我正確的方式？

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