Ember路由器v2进入和退出模态的正确方法是什么？ [英] What's the right way to enter and exit modal states with Ember router v2?

问题描述

我不知道使用新的Ember路由器处理模态/视图的正确方法。更一般来说，如何处理可以进入和退出而不影响主状态（URL）的状态？

例如，新消息按钮无论当前叶状态如何，都是始终可用。点击新消息应该在当前视图中打开新消息模态，而不影响URL。

目前，我使用的方式如下：

路线：

  App.Router.map（function（）{
 this.route（'inbox'）; 
 this.route（'archive'）; 
}）; 
 
 App.IndexRoute = Em.Route.extend（{
 ... 
事件：{
 newMessage：function（）{
 this.render （'new_message'，{into：'application'，outlet：'modalView'}）; 
}，
 
 //在新消息中单击保存或取消模态触发器此事件删除视图：
 hideModal：function（）{
 // BAD  - 使用私有API 
 this.router._lookupActiveView（'application'）。disconnectOutlet（'modalView'）; 
} 
} 
}）; 
 
 App.InboxRoute = Em.Route.extend（{
 ... 
 renderTemplate：function（controller，model）{
 // BAD  - 需要指定应用程序模板，而不是使用默认实现
 this.render（'inbox'，{into：'application'}）; 
} 
}）; 
 
 App.ArchiveRoute = ... //与InboxRoute基本相同
  

application.handlebars：

 < button {{action newMessage}}>新消息< / button> 
 {{outlet}} 
 {{出口modalView}} 
  

这个方法'工作'，但是有两个问题：

ol>

我正在使用私有API来删除 hideModal 事件处理程序中的模态视图。

我需要在所有子路径中指定应用程序模板，因为如果我没有，默认实现 renderTemplate 将尝试渲染到模态的模板而不是应用程序，如果您打开模态，关闭它，然后在收件箱和归档状态之间导航（因为模态的模板已成为 lastRenderedTemplate for IndexRoute）。

显然，这些问题都不是破产者，但是知道是否有一个更好的方法，我错过了，或者这只是当前路由器API中的一个空白。

解决方案

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

在我们的 RootRoute 我有一个事件（与你的 newMessage 相同），我们创建我们需要呈现的视图，然后附加它。

 事件：{
 showNewSomething：function（）{
 var newSomethingView = app.NewSomethingView.create（{
 controller ：this.controllerFor（'newSomething'）
}）; 
 newSomethingView.append（）; 
} 
} 
  

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

再次，这不是一个最佳实践，但它的工作。如果有人有更好的解决方案，请随意评论。

I can't figure out the correct way to handle modal states/views with the new Ember router. More generally, how do you handle states that you can enter and exit without affecting the "main" state (the URL)?

For example, a "New Message" button that is always available regardless of the current leaf state. Clicking "New Message" should open the new message modal over the current view, without affecting the URL.

Currently, I'm using an approach like this:

Routes:

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}}

I've obviously left out some code for brevity.

This approach 'works' but has the two problems identified above:

1. I'm using a private API to remove the modal view in the hideModal event handler.
2. I need to specify the application template in all of my subroutes, because if I don't, the default implementation of renderTemplate will attempt to render into the modal's template instead of into application if you open the modal, close it, and then navigate between the inbox and archive states (because the modal's template has become the lastRenderedTemplate for the IndexRoute).

Obviously, neither of these problems are dealbreakers but it would be nice to know if there is a better approach that I'm missing or if this is just a gap in the current router API.

解决方案

We do kind of the same thing but without accessing the private API. I don't know if our solution is a best practice, but it works.

In the events of our RootRoute I have an event (same as your newMessage), where we create the view we need to render, and then append it.

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

This appends the modal view into our app. On cancel or save in the newSomethingView we call this.remove() to destroy the view and removing it from the app again.

Again, this doesn't feel like a best practice, but it works. Feel free to comment on this if someone have a better solution.

这篇关于Ember路由器v2进入和退出模态的正确方法是什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！