javascript - 附加 View 而不是在应用程序启动时显示它

Question

我有一个 Marionette 应用程序，大致以这种方式设置(省略了不相关的部分):

App = new Marionette.Application();

App.addRegions({
  mainRegion: '#main-region'
});

App.AppRouter = Marionette.AppRouter.extend({
  appRoutes: {
    'signin': 'showSignin'
    'about': 'showAbout'
  }
});

var API = {
  showSignin: function () {
    App.Signin.Controller.showSignin();
  },

  showAbout: function () {
    App.Signin.Controller.showAbout();
  }
};

App.addInitializer(function () {
  new App.AppRouter({ controller: API });
});

App.Signin.Controller = {
  showSignin: function () {
    var data = App.request('signin:data'),
        signinView = new SigninView({ model: data });

    App.mainRegion.show(signinView);
  },
  showAbout: function () {
    var aboutView = new AboutView();

    App.mainRegion.show(aboutView);
  }
};

App.SigninView = Marionette.LayoutView.extend({
  template: '#signin-template',
  regions: {
    signinForm: '#signinForm',
    signinForgot: '#signinForgot'
  }
});

App.AboutView = Marionette.AboutView.extend({
  template: '#about-template',
});

$(function () {
  App.start();
});

当应用程序加载时，页面首先在服务器端呈现。在这种情况下，我只想调用 attachView()在相关区域而不是 show()以防止不必要的重新渲染。然后，当应用程序在两条路线之间导航时，例如从“关于”到“登录”，我将实例化一个新 View 并将其传递给 show() 。这就是我有点卡住的地方。我可以随时调用 attachView()而不是show()当应用程序启动时，只需传递 { silent: true }至Backbone.history.start() 。然而，诀窍是知道用户加载了哪个页面，“登录”或“关于”，因此我知道将哪个 View 附加到 mainRegion。然而，这表明我不应该在应用程序加载时抑制路由触发，这样我就知道哪个页面应该附加其 View ，但这又会导致 show()来电。有解决这个问题的模式吗？

Answer 1

您可以使用App.mainRegion.hasView()来检查其中是否有 View 。

showAbout: function () {
   var aboutView = new AboutView();

   if (App.mainRegion.hasView()) {
       App.mainRegion.show(aboutView);
   } else {
       App.mainRegion.attachView(aboutView);
   }
}

另一种方法，您可以简单地创建具有覆盖显示逻辑的自定义区域类。了解更多信息marionette docs