路线上的 Emberjs 模态

Question

所以我想弄清楚如何最好地将模式放在路线上，以便您可以通过 url 导航到它们。

application.hbs

{{outlet}}

{{outlet modal}}

有一个讨论 here 并且 emberjs 食谱提供了另一个 example，但没有任何内容涵盖如何在特定路线上使用模式。

我见过的最接近的是Stack Overflow question，但它存在两个问题：

1. 当访问模态路径时，主出口中的视图被破坏。因此，在您的 UI 中，模态下方的内容会被清除。
2. history.back() 本质上是您重新访问该路线导致该视图被重绘并且感觉非常hackish。

这是我认为存在解决方案但不确定具体是什么的地方：

App.MyModalRoute = Ember.Route.extend({

renderTemplate: function(controller, model) {

  /**
   * When my modal route is visited, render it in the outlet
   * called 'modal' but somehow also persist the default outlet.
   **/
   this.render({ outlet: 'modal' });   
} 

});

Answer 1

这里有几个选项：

• 让模态路径成为你想要持久化的路径的子路径——而不是像你提到的例子那样渲染嵌套在应用程序模板中的模态，或者把它放在自己的模板中id="myModal"

• 在持久化路由的出口内添加模态出口并在renderTemplate方法中渲染

  renderTemplate: function(controller, model) {
      this.render();   //render default template
  
      this.render('myModalTemplate', { //render modal to its own outlet
          outlet: 'modal', 
          into: 'myModal', //parent view name. Probably same as route name
          controller : controller
      });
  }
  

此外，您可以随时在命名插座中使用模态渲染模板（在动作 f.e. 上），只需使用适当的参数调用 render 方法

Answer 2

我们是这样处理的：

在路线中，您使用类似于您描述的渲染块：

App.UserDeleteRoute = Ember.Route.extend({
  renderTemplate: function() {    
    this.render({
      into: 'application',
      outlet: 'modal'
    });    
  },

  actions: {
    closeModel: function() {
      this.transitionTo('users.index');
    }
  },
  deactivate: function() {
    this.render('empty', {
      into: 'application',
      outlet: 'modal'
    });
  }  
}

清除“deactivate”挂钩上的插座是重要的一步。

对于主模板，您只需要：

{{outlet}}
{{outlet "modal"}}

这不会覆盖默认出口。

您可能想要为所有模式做的一件事是实现布局：

App.UserDeleteView = Ember.View.extend({
  layoutName: 'settings/modals/layout',
  templateName: 'settings/modals/user_delete'
});

另一个问题是需要有一个父路由渲染到主出口。如果该出口中的任何东西都不是您的模态的父级，那么离开该路线的行为会将其从出口中移除。

working JS bin