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

【问题标题】：What's the right way to enter and exit modal states with Ember router v2?使用 Ember 路由器 v2 进入和退出模态状态的正确方法是什么？
【发布时间】：2012-12-28 23:22:28
【问题描述】：

我无法找出使用新 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}}

为了简洁起见，我显然省略了一些代码。

这种方法“有效”，但存在上述两个问题：

我正在使用私有 API 来删除 hideModal 事件处理程序中的模式视图。
我需要在我的所有子路由中指定application 模板，因为如果我不这样做，renderTemplate 的默认实现将尝试呈现到模态的模板中，而不是在打开模态时呈现到应用程序中，关闭它，然后在收件箱和存档状态之间导航（因为模态的模板已成为 IndexRoute 的lastRenderedTemplate）。

显然，这些问题都不是破坏者，但很高兴知道我是否缺少更好的方法，或者这只是当前路由器 API 中的一个差距。

【问题讨论】：

标签： ember.js ember-router

【解决方案1】：

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

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

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

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

同样，这感觉不是最佳做法，但它确实有效。如果有人有更好的解决方案，请随时对此发表评论。

【讨论】：

谢谢 - 这对我来说很有意义，并且避免了我的解决方案中的一些状态问题。

【解决方案2】：

不知道您使用的是 Bootstrap Modal 脚本还是哪个，但如果您是，这个问题有一个建议的解决方案。我自己还没有弄清楚所有的部分，但我自己正在寻找一种类似类型的解决方案，以便能够以符合“Ember 最佳实践”的方式使用Colorbox。

【讨论】：