Question

我想为项目（图片/项目/帖子/等等）实施Pinterest风格的模态页面。无论您使用哪个页面，当您点击某个项目时，会弹出一个带有项目详细信息的模态，而您所在的页面（供稿）仍然位于后台。地址栏中的网址会发生变化，因此您可以链接到其他网站上的项目或将其分享给您的朋友。当您关闭项目模态时，您仍然在Feed中。

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

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

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

＆＃34; url / pictures /：id可能会匹配两条路线，这取决于网址是否从Feed导航到。＆＃34;

＆＃34;点击Feed中的项目，看到它以叠加方式打开。然后将其复制/粘贴到其他浏览器窗口（如Chrome - ＆gt; Firefox）中，并看到图片无法在叠加层内呈现。一个URL，两个会话相关的路由和UI：D＆＃34;

链接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路由可以使用pictures访问this.modelFor('pictures')模型），并且仍然可以获得可识别资源的好处网址格式。

YMMV，但您也可以使用图片的路由renderTemplate方法，以便在特定的 outlet 中呈现结果从图片树中完全分离单个图片渲染。

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

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

Pinterest风格路线

1 个答案: