Meteor 1.3の経路変更にテンプレートを再レンダリング

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', 
}); 

ですその後、私のテンプレートは次のようになります - li要素にselectedクラスを追加するために、単純なヘルパーで

<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> 

-

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; 
    } 
    } 
}); 

私は、どのように（そしていつ）のtempl atesがレンダリングされます。

ルートが変更されたときにこれらのテンプレートを再レンダリングするには、何が必要ですか？

Answer 1

フロールータはこのように動作するように設計されています。自動的には再レンダリングされません。

単純な修正は、ルートのパラメータに依存するすべてのテンプレートヘルパーにFlowRouter.watchPathChange();を追加することです。

だからこのケースでsidebar.jsを更新 - そのヘルパーは、パスが変更されるたびに、それが更新されるようになりましたsidebarItemテンプレートで使用されている

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

。