路线上的Emberjs模式 [英] Emberjs Modals on a route

问题描述

因此，我试图找出如何最好地在路径上放置模式，以便您可以通过url导航到它们。

So I am trying to figure out how best to put modals on a route, such that you can navigate to them via the url.

application.hbs

{{outlet}}

{{outlet modal}}

有一个讨论此处，而emberjs食谱提供了另一本示例，但没有任何内容涵盖如何在特定路线上使用模态。

There is a discussion here and emberjs cookbook provides another example but nothing covers how you can have modals on a specific route.

我所看到的最接近的东西是堆栈溢出问题，但它遇到两个问题：

The closest thing I have seen is this Stack Overflow question but it suffers from two problems:

1. 访问模态路线时，主出口被毁。因此，在用户界面中，模态下的所有内容都会被清除。 >
   

1. When the modal route is visited, the view in the main outlet gets destroyed. So in your UI, things underneath the modal get wiped out.
2. history.back() is that you essentially revisit that route causing that view to be redrawn and feels very hackish.

这是我觉得可以解决的地方，但不确定到底是什么：

This is where I feel a solution would exist but not sure what exactly:

App.MyModalRoute = Ember.Route.extend（{

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

}）;

推荐答案

这是我们的处理方式：

在路线中，使用与您所描述的相似的渲染段：

In the route you use a render piece similar to what you described:

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钩上的出口是一个重要步骤。

Clearing out outlet on the "deactivate" hook is an important step.

对于主模板，您需要做的是：

For the main template all you need is:

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

覆盖默认出口。

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

One thing you may want to do for all your modals is implement a layout:

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

另一个难题是，需要在主出口中绘制父路线。如果那个出口中的任何东西都不是您的模态的父级，那么离开该路线的行为会将其从出口中删除。

Another gotcha is that there needs to be a parent route rendered into the main outlet. If whatever is in that outlet is not the parent of your modal, then the act of moving away from that route will remove it from the outlet.

正在使用JS bin

这篇关于路线上的Emberjs模式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！