Pinterest 风格路线

Question

我想为项目（图像/项目/帖子/等...）实现 Pinterest 样式的模式页面。无论您在哪个页面上，当您单击一个项目时，会弹出一个带有项目详细信息的模式，并且您所在的页面（提要）仍然位于后台。地址栏中的 url 发生变化，因此您可以从其他网站链接到该项目或将其分享给您的朋友。当您关闭项目模式时，您仍然在提要中。

Ember 是否支持这种类型的路由？

我知道 react-router 支持它，所以我想 Ember 也会受到 Ember-router 的极大启发。

来源：https://github.com/rackt/react-router/tree/master/examples/pinterest

“网址 /pictures/:id 可能匹配两条路线，这完全取决于网址是否从提要导航到。”

“点击提要中的一个项目，并看到它在叠加层中打开。然后将其复制/粘贴到不同的浏览器窗口（如 Chrome -> Firefox），并看到图像不会在叠加层中呈现. 一个 URL，两个依赖会话的路由和 UI :D"

链接的 Ember.js 讨论：http://discuss.emberjs.com/t/pinterest-style-routes/8487

Answer 1

我认为没有这样的原生行为，因为一条路径将匹配一条路由，但它可以通过一些插座和条件显示和嵌套路由进行管理。

以下路由器将提供执行所需的几乎所有内容：

// router.js

import Ember from 'ember';
import config from './config/environment';

var Router = Ember.Router.extend({
  location: config.locationType
});

Router.map(function() {
  this.route('pictures', function() {
    this.route('picture', {
      path: '/picture/:picture_id',
      resetNamespace: true
    });
  });
});

export default Router;

使用路由嵌套，如果pictures 路由提供了图片列表（并显示单个结果的链接），您应该能够显示图片列表，选择单个图片根据结果​​的存在与否显示（弹出与单个结果）（picture 路由可以使用this.modelFor('pictures') 访问pictures 模型），并且仍然可以获得可识别资源 URL 模式的好处。

YMMV，但是如果你想完全分离单张图片渲染，也可以配合图片的路由renderTemplate方法在特定的outlet渲染结果来自图片树。

编辑： 响应示例的链接已损坏，您的意思是 https://github.com/rackt/react-router/tree/master/examples/pinterest？

EDIT2： Adding route to a modal/overlay in Ember.js