使用Ember路由器v2进入和退出模态的正确方法是什么？

Question

我无法弄清楚使用新的Ember路由器处理模态状态/视图的正确方法.更一般地说,如何处理可以进入和退出而不影响"主"状态(URL)的状态？

例如,无论当前叶状态如何,始终可用的"新消息"按钮.单击"新消息"应在当前视图上打开新消息模式,而不会影响URL.

目前,我正在使用这样的方法:

路线:

App.Router.map(function() {
   this.route('inbox');
   this.route('archive');
});

App.IndexRoute = Em.Route.extend({
  ...
  events: {
    newMessage: function() {
      this.render('new_message', { into: 'application', outlet: 'modalView' });
    },

    // Clicking 'Save' or 'Cancel' in the new message modal triggers this event to remove the view:
    hideModal: function() {
      // BAD - using private API
      this.router._lookupActiveView('application').disconnectOutlet('modalView');
    }
  }
});

App.InboxRoute = Em.Route.extend({
   ...
   renderTemplate: function(controller, model) {
     // BAD - need to specify the application template, instead of using default implementation
     this.render('inbox', { into: 'application' });
   }
});

App.ArchiveRoute = ... // basically the same as InboxRoute

application.handlebars:

<button {{action newMessage}}>New Message</button>
{{outlet}}
{{outlet modalView}}

为了简洁,我显然遗漏了一些代码.

这种方法"有效"但有上述两个问题:

1. 我正在使用私有API来删除hideModal事件处理程序中的模态视图.
2. 我需要application在所有子路径中指定模板,因为如果我不这样做,默认实现renderTemplate将尝试渲染到模态的模板而不是应用程序,如果你打开模态,关闭它,然后在收件箱之间导航和归档状态(因为模态的模板已成为lastRenderedTemplateIndexRoute).

显然,这些问题都不是破坏者,但是如果有一种更好的方法可以解决,或者这只是当前路由器API中的一个缺口,那将会很高兴.

Answer 1

我们做了同样的事情，但不访问私有 API。我不知道我们的解决方案是否是最佳实践，但它确实有效。

在我们的事件中，RootRoute我有一个事件（与您的相同newMessage），我们在其中创建需要渲染的视图，然后附加它。

events: {
    showNewSomething: function(){
        var newSomethingView = app.NewSomethingView.create({
            controller: this.controllerFor('newSomething')
        });
        newSomethingView.append();
    }
}

这会将模态视图附加到我们的应用程序中。在取消或保存时，newSomethingView我们调用this.remove()销毁视图并再次将其从应用程序中删除。

同样，这感觉不是最佳实践，但它确实有效。如果有人有更好的解决方案，请随意评论。