Question

所以我想弄清楚如何最好地在路线上放置模态，这样你就可以通过网址导航到它们。

application.hbs

{{outlet}}

{{outlet modal}}

有一个讨论here和emberjs cookbook提供了另一个example但没有任何内容涵盖了如何在特定路线上设置模态。

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

访问模态路径时，主插座中的视图会被破坏。所以在你的用户界面中，模态下面的东西就会消失。
history.back（）是你基本上重新审视那条导致该视图被重绘的路线，并感觉非常黑客。

这是我觉得解决方案存在的地方，但不确定究竟是什么：

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

以下是我们处理它的方式：

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

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'
    });
  }  
}

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

对于主模板，您只需要：

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

这不会覆盖默认插座。

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

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

另一个问题是，需要将父路线渲染到主要插座中。如果该出口中的任何东西不是您的模态的父母，那么远离该路线的行为将把它从出口处移除。

working JS bin

Answer 2

你有几个选择：

制作你想要坚持的路线的模态路线子项 - 比应用模板中嵌套的渲染模式，就像你提到的例子，或者把它放在自己的模板中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方法

Emberjs Modals在一条路线上

2 个答案: