Question

我有一个以这种方式大致设置的木偶应用程序（省略了不相关的部分）：

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()以防止不必要的重新呈现。然后，当应用程序在两条路线之间导航时，例如从＆＃39; about＆＃39;要登录＆＃39;，我会实例化一个新视图并将其传递给show()。在这里，我有点卡住了。只需将attachView()传递给show()，我就可以在应用启动时始终致电{ silent: true }而不是Backbone.history.start()。然而，诀窍是知道用户加载了哪个页面，并且注册了＃39;或者＆＃39;关于＆＃39;，所以我知道要附加到mainRegion的视图。但是，这表明我不应该在应用程序加载时禁止触发路由，因此我知道哪个页面应该附加其视图，但同样，这将导致show()调用。有解决这个问题的模式吗？

Answer 1

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

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

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

另一种方法是，您可以使用覆盖的显示逻辑简单地创建自定义区域类。请参阅marionette docs

了解详情

附加视图而不是在应用程序启动时显示它

1 个答案: