Pinterest风格路线

Question

我想为项目(图片/项目/帖子/等等)实现一个Pinterest样式的模式页面。无论您在哪一页上，当您单击项目时，都会弹出带有项目详细信息的模式，而您来自的页面(提要)仍位于后台。地址栏中的url会发生变化，因此您可以从其他站点链接到该项目，或者将其共享给您的朋友。当你关闭物品的时候，你仍然会在饲料中停留。

Ember支持这种路由吗？

我知道react路由器对它有支持，所以我想Ember也会对它产生很大的启发。

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

“url /图片/:id可能匹配两条路由，这都取决于是否从提要导航到url。”

单击提要中的一个项目，看到它在一个覆盖层中打开。然后将其复制/粘贴到另一个浏览器窗口(如Chrome ->火狐浏览器)，并看到图像没有在覆盖层内呈现。一个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方法，以呈现结果在特定的出口，如果你想要完全分开的单一图片呈现与图片树。

编辑:反应示例的链接坏了，您的意思是https://github.com/rackt/react-router/tree/master/examples/pinterest吗

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