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

时间:2016-06-16 12:13:28

标签: javascript meteor flow-router

当迁移到使用Flow-Router替换Iron-Router的新Meteor项目时,我真的错过了Iron-Router的功能来定义全局可用的默认行为和设置。

我理解Flow-Router使用“group”结构来定义默认挂钩事件,这些事件可以应用于连接到该组的任何路由,但似乎没有可用于定义默认模板。

实施此类默认全局或组模板功能的最佳方法是什么?

3 个答案:

答案 0 :(得分:2)

我决定使用一个简单的抽象,它可以模拟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中进行更直接的集成,但这看起来非常实用。有任何改进的想法吗?

答案 1 :(得分:1)

我想提交另一个我找到的解决方案,它增加了一种更全面的方法来创建路由&#34;默认&#34; Flow-router的参数。

它使用名为Flow-router-tree的气氛包:

该软件包允许将路由定义为一系列节点&#34;这可以与父母&#34;然后,它将继承在该父级定义中设置的默认参数。看到其他人对这个包的评论会很有意思。

答案 2 :(得分:1)

以下更新:

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

在审查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()中使用模板默认值的方式,本地路径模板定义的附加好处是不会覆盖整个默认模板对象。

  • UPDATE 以上对我来说效果很好,虽然我最终确定了having another problem,我必须解决这个问题才能使其始终如一地工作。

基本上,如果您修改任何基础&#34;路由默认值&#34;正如我们所做的那样,在本地route.action函数中,由于Flow-Router是非反应性的,只要路由在同一组中,路由器组对象似乎就会从路由到路由持续存在。这个&#34;选项&#34; object从路由定义传递给路由器。所以这意味着如果你在上面的情况下覆盖一个默认参数,那么在覆盖它的路由被调用之后,它将覆盖使用同一组的所有后续路由。

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

然后只是重置默认值。我在退出时执行此操作的原因是,调用的下一个路径仍然可以在本地覆盖这些默认值:

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