javascript - 可从任何地方访问的路线上的 Ember Modal

Question

我正在构建一个应用程序，它有一个在模态对话框中弹出的用户设置面板。该面板应该可以从应用程序中的任何页面访问。我正在尝试找出在 Ember 中构建它的最佳方法。

我想以这样一种方式构建它，即当应用程序重定向到“/settings”路由时，模态对话框会像您期望的那样在后台显示当前路由。然后，当模式关闭时，应用会重定向回该路线。

如果用户直接从她的浏览器转到“/settings”，那么模态将在后台显示一个默认页面。

这是我目前所拥有的:

export default Ember.Route.extend({

  defaultParentRoute: "project.index",

  beforeModel: function(transition){
    // get the name of the current route or if
    // user came directly to this url, use default route name
    var parent = this.get("defaultParentRoute");
    var application = this.controllerFor('application');
    if(application && application.get('currentRouteName')) {
      parent = application.get('currentRouteName');
    }
    this.set("parentRoute", parent);
  },

  renderTemplate: function(){
    // make sure the current route is still rendered in the main outlet
    this.render(this.get("parentRoute"));

    // render this route into the 'modal' outlet
    this.render({
      into: 'application',
      outlet: 'modal'
    });
  },  

  actions: {
    removeModal: function(page){ 
      // go back to the previous route     
      this.transitionTo(this.get("parentRoute"));
    }
  }

});

当从应用程序中的链接导航到路线时，这非常有效。但是，如果用户在她的浏览器中直接进入“myapp/settings”，则会呈现默认页面模板但没有任何数据，或者它会尝试使用我的设置路径中的“模型”数据。

如何确保模态下方的模板使用适当的数据呈现？

Here's a JS Bin to demonstrate .尝试从应用程序的任何页面点击“设置”，然后在设置模式打开时刷新浏览器。

Answer 1

考虑到 Ember 惯例，这种组织方式似乎有点不自然。通常，URL 应该代表状态的序列化版本，足以重建用户所在的位置 (see this old discussion)。

您似乎想将模式状态和当前路由放入 URL 中。从其他路由访问设置模式面板但不更改 URL 可能更自然，然后有另一个单独的路由专用于设置并仅显示设置。

模态面板看起来更像是一个下拉菜单，打开和关闭它不会改变 URL，即使它们代表一个微小的状态变化。

如果您希望在 URL 中反射(reflect)设置模式的原因是人们可以将其添加为书签或共享链接，一个选择是在设置页面上提供一个永久链接，使他们可以转到其他专用路径这是可共享的。

没有路由设置的棘手一点是没有一个明显的地方可以加载模型，它的行为与路由的 model Hook 一样好或一样容易(即，等到 promise 被解决以完成转换)。

解决这个问题的一种方法是将加载设置模型的功能放在设置服务中，可以在任何地方注入(inject):

SomeController = Ember.Controller.extend({
  settings: Ember.inject.service()
});

并且让设置服务只在模型加载后显示。

SettingsService = Ember.Service.extend({
  settingsLoaded: false,
  ensureLoaded: function() {
    var _this = this;
    return new Ember.RSVP.Promise (resolve) {
      if (_this.get('settingsLoaded')) {
        resolve()
      } else {
        _this.store.find('settings', someId).then(function(model) {
          _this.set('model', model);
          _this.set('settingsLoaded', true);
          resolve();
        });
      }
    };
  }
});

最后，您可以在某个 Controller 上设置一个函数，该函数想要显示设置模式，仅在加载设置后才显示它:

showSettings: function() {
  this.get('settings').ensureLoaded().then(function() {
    ... # something to show the modal pane.
  });
}