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

Question

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

我知道 Flow-Router 使用 "group" 构造来定义默认挂钩事件，这些事件可以应用于附加到该组的任何路由，但似乎没有任何可用于定义默认模板的东西。

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

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 创建路由 "default" 参数。

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

此包允许将路由定义为一系列 "nodes"，这些路由可以链接到 "parents"，然后将继承父级定义中设置的默认参数。看到其他人对此包的评论会很有趣。

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 defaults"，在本地 route.action 函数中，由于 Flow-Router 是非反应性的，路由器组对象似乎从路由中持续存在只要路由在同一组中就可以路由。此 "options" 对象也从路由定义传递到路由器。所以这意味着如果您在上述情况下覆盖默认参数，则在调用覆盖它的路由之后，使用同一组的所有后续路由都会覆盖它。

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

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

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

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

A good way to define default rendering templates in FlowRouter

javascript

meteor

flow-router