Emberjs Modals在一条路线上

Question

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

application.hbs

{{outlet}}

{{outlet modal}}

有一个讨论,在这里和emberjs食谱提供了另一个例子,但没有涵盖了你怎么能有一个特定的路线上情态动词.

我所看到的最接近的是Stack Overflow这个问题,但它有两个问题:

1. 访问模态路径时,主插座中的视图会被破坏.所以在你的用户界面中,模态下面的东西会被消灭掉.
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

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

在路线中,您使用类似于您描述的渲染片:

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

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

工作JS bin