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 中了解更多信息