在 FlowRouter 中定义默认渲染模板的好方法

Question

当迁移到一个用 Flow-Router 替换 Iron-Router 的新 Meteor 项目时，我真的很怀念 Iron-Router 定义全局可用的默认行为和设置的功能。

我了解 Flow-Router 使用“组”构造能够定义默认挂钩事件，这些事件可以应用于附加到该组的任何路由，但似乎没有可用于定义默认模板的任何东西。

实现这种类型的默认全局或组模板功能的最佳方式是什么？

Answer 1

我决定使用一个简单的抽象来模拟 Iron-Router 的这个特性。我正在尝试评估这是否是一种合理且可扩展的模式，然后再考虑在 FlowRouter 本身中更直接地集成这种功能，并与正在寻找类似解决方案的其他人分享这个想法。

我只是创建了一个对象，它用作参数对象模板，根据需要进行修改，然后在调用 BlazeLayout.render 时传递。

这就是routes.js 的样子：

var appRouteGroup = FlowRouter.group({
  name: "appRouteGroup",
  triggersEnter: [sometrigger]
});

var appRouteTemplates = {
  menuMain: "appNav",
  footerMain: "appFooter"
};

appRouteGroup.route("home", {
  name: "home",
  action: function () {
    // We get the default templates
    var templates = appRouteTemplates;

    // Now we can add the route specific template
    templates.content = "homePage";

    // Then render with templates passed through the object param
    BlazeLayout.render("mainLayout", templates);
  }
});

这将允许您呈现默认组模板，而无需为每个路由重新定义它们。模板标记如下：

<template name="mainLayout">
  {{>Template.dynamic template=menuMain}}

  {{>Template.dynamic template=content}}

  {{>Template.dynamic template=footerMain}}
</template>

我正在寻找一种可能在 FlowRouter 中进行更直接集成的方法，但这似乎非常实用。有什么改进的想法吗？

Answer 2

我想提交我找到的另一个解决方案，它添加了一种更全面的方法来为 Flow-router 创建路由“默认”参数。

它使用了一个名为Flow-router-tree的大气包：

此包允许将路由定义为一系列“节点”，这些“节点”可以链接到“父节点”，然后将继承该父节点定义中设置的默认参数。看到这个包上的其他 cmets 会很有趣。

Answer 3

以下更新：

我已经找到了一种我认为相当有效且高效的方法。

在查看 Flow-Router 的功能时，我注意到路由器对象包含一个包含所有组参数的字段，位于 FlowRouter.current().route.group.options

此对象包含组中定义的任何键值对，无论它们是否被 Flow-Router API 使用。

然后我决定使用它作为将一些模板默认值从组传递到路由器的简单方法。

首先是组定义：

var mainRoutes = FlowRouter.group({
  name: "mainRoutes",
  defaultTemplates: {
    menu: "mainMenu",
    breadcrumb: "mainCrumb",
    sidebarLeft: "sidebarLeft",
    sidebarRight: "sidebarRight",
    footer: "mainFooter"
  }
});

然后在定义路由时，我们可以从this.group.options.defaultTemplates 访问这些

mainAppRoutes.route('/', {
  name: "home",
  action: function() {
    // Get the defaultTemplates object
    var templates = this.group.options.defaultTemplates;
    // Add route specific templates
    templates.content = "homeScreen";
    // Pass all the templates to the renderer
    BlazeLayout.render("appLayoutMain", templates);
  }
});

我喜欢这种模式，因为它使用了 Flow-Router 的现有功能，并在路由中增加了一行代码，同时允许定义组范围的默认模板。这基本上模仿了 Iron-Router 如何使用 Router.config() 中的模板默认值，并具有本地路由模板定义不会覆盖整个默认模板对象的额外好处。

• 更新 以上对我来说效果很好，虽然我最终得到了having another problem，但我必须解决这个问题才能使其始终如一地工作。

本质上，如果您像我们一样在本地 route.action 函数中修改任何底层“路由默认值”，由于 Flow-Router 是非反应性的，路由器组对象似乎在路由之间持续存在只要路线在同一组中。这个“选项”对象也从路由定义传递给路由器。所以这意味着如果您在上述情况下覆盖默认参数，那么在调用覆盖它的路由之后，使用同一组的所有后续路由都将覆盖该参数。

我想出的解决方案是在组定义中执行默认重置功能：triggersExit: [ resetDefaults ]。

然后只是重置默认值。我在退出时这样做的原因是，下一个被调用的路由仍然可以在本地覆盖这些默认值：

function resetDefaults (context) {
  context.route.group.options.defaultLayoutTemplate = "mainAppLayout";
  context.route.group.options.defaultTemplates = {
    defaultTeamplates: "navMain",
    // ...
};