Question

我正在使用Flow Router和Blaze Renderer建立一个简单的网站（想想博客/宣传册）。

我正在使用FlowRouter.path()在菜单元素上创建链接。单击这些链接并触发路由上的action(）方法时，URL会按预期更改。但是，模板似乎不会刷新，并且不会触发模板助手。

我的/lib/route.js文件中的路由是

const about = FlowRouter.group({
  prefix: '/about'
});

about.route('/:pageSlug/:subSectionSlug', {
  action: (params) => {
    console.log('action() fired :' + params.pageSlug + ' :' + params.subSectionSlug);
    BlazeLayout.render( 'applicationLayout', {
      main: 'basicPage',
    });
  },
  name: 'pageSubsection',
});

然后我的模板看起来像 -

<template name="applicationLayout">
        {{> Template.dynamic template=main}}
</template>

<template name="basicPage">
    <div id="pageWrapper">
        ...
        <aside class="leftBar subSectionMenu">
            {{> sidebar }}
        </aside>
        ...
    </div>
</template>

<template name="sidebar">
    <ul class="pageMenu">
        {{#each subSections }}
            {{> sidebarItem}}
        {{/each}}
    </ul>
</template>

<template name="sidebarItem">
    <a class="sidebarItemAnchor" href="{{ href }}">
        <li class="sidebarItem .hoverItem {{#if isSelected }} selected {{/if}}">
            {{title}}
            <span class="sidebarArrow"></span>
        </li>
    </a>
</template>

使用简单的帮助器将selected类添加到li元素 -

Template.sidebarItem.helpers({
  href() {
    const subSection = this;
    const params = {
      pageSlug: subSection.pageSlug,
      subSectionSlug: subSection.slug,
    }
    return FlowRouter.path('pageSubsection', params, {});
  },
  isSelected() {
    const slug = FlowRouter.current().params.subSectionSlug;
    console.log('running isSelected with ' + slug);
    if (this.slug === slug) {
      return true;
    } else {
      return false;
    }
  }
});

我认为我必须误解模板的呈现方式（以及何时）。

当路线发生变化时，我需要做些什么才能重新渲染这些模板？

Answer 1

Flow Router的设计就是这样工作的。它不会自动重新渲染。

一个简单的解决方法是将FlowRouter.watchPathChange();添加到依赖于路径参数的所有模板助手中。

所以在这种情况下更新sidebar.js -

Template.sidebarItem.helpers({
  isSelected() {
    FlowRouter.watchPathChange();
    const slug = FlowRouter.current().params.subSectionSlug;
    if (this.slug === slug) {
      return true;
    } else {
      return false;
    }
  },
});

当在sidebarItem模板中使用该帮助程序时，只要路径发生更改，它就会立即更新。

在Meteor 1.3中重新渲染路线变化的模板

1 个答案: