将路由添加到Ember.js中的模态/覆盖 [英] Adding route to a modal/overlay in Ember.js

问题描述

我知道Ember的口头禅是URL，URL应该是页面内容的序列化，但是我有一个场景，我想为一个组件/页面创建路径，该路径将生成一个模态，并且可以从整个网站的各个地方。我一直希望这个URL代表资源的实际路由，如果资源恰好嵌套在另一个路由中，则不会更改。

类似的例子是Pinterest。当您查看针脚时，您在根路线上。您还可以搜索引脚，然后指向 / search / pins 路由。

从这两条路线，您可以点击一个引脚，这将打开它在模态/覆盖，并将url更改为引脚的url。由于您可以查看该网站的不同区域的引脚，覆盖层后面的背景将根据您点击该引脚的位置而不是序列化版本路由而有所不同。

这种类型的功能在Ember中可以使用吗？如果是这样，请查看任何资源/提示？

- ac。

解决方案

这个SO问题可能是一个指针，我在路由中的激活钩子之前使用render方法之前已经这样做了。

所以我的模态模板被注入一个命名的插座（例如 {{ modal'}} ）当您输入给定路由。

以下是我正在开展工作的项目中描述的方法的示例。

在父路由中，我有一个名为 openEditModal 的动作（在我的情况下，我做一个负载逻辑就像得到编辑按钮被按下的视图的模型，并且在编辑路径控制器上进行设置）。 动作最终 transitionTo 编辑路线。

  openEditModal：function（eventModel）{
 
 //在这里做任何逻辑就像为模态设置模型
 
 //转换到编辑路由
 this.transitionTo（'patient.events.edit'）; 
}，
  

所以当$ code>编辑 route is active：

  activate：function（）{
 
 //渲染模板'modal'outlet 
 this.render（'path / to / modal / template'，{
 controller：'patient.events.edit'，//控制器用于注入模板
 view：'patient.events.edit'，//用于注入模板
的视图：'patient.events'//将父模板注入到
插座中： 'modal'//该父模板中的插座的名称
}）; 
 
}，
  

I know Ember's mantra is URL first and the URL should be a serialization of the page contents, but I have a scenario where I want to create a route for a component/page that will live in a modal, and be accessible from various places throughout the site. I always want this URL to represent the actual route of the resource, not change if the resource happened to be nested in another route.

A similar example is Pinterest. When you are looking at the feed of pins you are on the root route. You can also do a search for pins and you are then directed to the /search/pins route.

From both of these routes, you can click on a pin, which will open it up in a modal/overlay, and also change the url to the url of the pin. Since you can view pins from different areas of the site, the background behind the overlay will be various routes depending on where you click the pin from, not a serialized version of the route.

Is this type of functionality possible in Ember? If so, any resources/hints to review?

- ac.

解决方案

This SO Question might be a pointer, I have done this before using the render method inside of the activate hook in the route.

So my modal template is injected into a named outlet (e.g {{outlet 'modal'}}) when you enter a given route.

Here is an example of the method I described in a project that I am currently working on.

In the parent route I have an action called openEditModal (in my case I do a load of logic like getting the model of the view where the edit button is pressed and setting that on the edit routes controller). This action ultimately transitionTo the edit route.

    openEditModal: function(eventModel) {

        // Do any logic here like setting the model for the modal

        // Transition to the edit route
        this.transitionTo('patient.events.edit');
    },

So when the edit route is active:

activate: function() {

    // render the template in the 'modal' outlet
    this.render('path/to/modal/template', {
        controller: 'patient.events.edit', // The controller to use for the injected template
        view: 'patient.events.edit', // The view to use for the injected template 
        into: 'patient.events', // The parent template to inject this template into
        outlet: 'modal' // The name of the outlet in that parent template
    });

},

这篇关于将路由添加到Ember.js中的模态/覆盖的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！