MeteorJS iron-router "sub-templates" 或重新渲染预防或可选参数

MeteorJS iron-router "sub-templates" or re-render prevention or optional parameter

我正在尝试将一个包含许多已弃用软件包的两年前的流星项目迁移到当前版本。但我坚持使用 iron-router 和这个:

  1. 一条路线 /map 显示带有标记的交互式地图
  2. 当用户单击标记时,会打开一个绝对定位的 div 全宽高度并显示详细信息页面
  3. url 应更改为 /map/<markerId> 以便用户可以共享 url 并使用后退按钮
  4. 持有地图的 div 应该 被销毁或重新渲染,因为用户在返回时不应该像缩放和滚动那样松开他的 "map-state"

我尝试了几种方法,但没有找到同时解决第 3 点和第 4 点的解决方案。 使用旧的路由器包,它只适用于设置不同会话变量并呈现相同模板的两条路由。

提前感谢您的想法

您可以尝试使用 Iron Router 的 render 函数的 to 参数:

this.render('markerdetails', { to: 'yieldname' });

要使用它,您需要在包含地图的模板中指定产量:

{{> yield "yieldname"}}

进一步阅读 to 参数:https://github.com/iron-meteor/iron-router/blob/devel/Guide.md#rendering-templates-into-regions-with-javascript

不能 100% 确定如果用户打开 URL 会发生什么。您可能会检查地图是否已经可见,如果不可见,请先渲染地图,然后将标记渲染到产量中。

您可以尝试从 Iron Router 切换到 Meteorhacks 的 Flow-Router because it has a better separation between routing and rendering, and rendering is not reactive. In fact Flow-Router doesn't handle its own rendering at all. Instead you can use MeteorHacks' Flow-Layout or something else if you'd like. Here's Arunoda's article

这里是 Flow Router 和 Layout 的一个非常基本的例子。 它会尝试渲染尽可能少的数量,或者如果您愿意,您可以看到如何只更改路线但根本不进行渲染...

FlowRouter.route('/tasks', {
  subscriptions: function(){
    this.register('myTasks', Meteor.subscribe('tasks'))
  },
  action: function() {
    FlowLayout.render('layout1', { // the "layout" holds templates
      top: "header",
      main: "tasks" 
    });
  }
});