ember.js - 路线上的 Emberjs 模态

Question

所以我试图找出如何最好地将模态放在路线上，以便您可以通过网址导航到它们。

application.hbs

{{outlet}}

{{outlet modal}}

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

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

1. 当访问模态路线时，主导出中的 View 会被破坏。因此，在您的用户界面中，模式下方的内容会被删除。
2. history.back() 是您本质上重新访问该路线，导致该 View 被重新绘制，感觉非常黑客。

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

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

我们的处理方式如下:

在 route ，您使用类似于您所描述的渲染片段:

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

清除“停用” Hook 上的 socket 是重要的一步。

对于主模板，您需要的是:

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

这不会覆盖默认 socket 。

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

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

另一个问题是需要有一个父路由渲染到主导出中。如果该导出中的任何内容都不是模态的父级，则远离该路线的行为会将其从导出中删除。

working JS bin