Re-render-Vorlagen auf Route ändern in Meteor 1.3

Question

Ich benutze Flow Router und Blaze Renderer für eine einfache Website (think blog/brochureware).

Ich verwende FlowRouter.path(), um Links auf meinen Menüelementen zu erstellen. Die URL ändert sich wie erwartet, wenn auf diese Links geklickt wird und die Methode action() auf der Route ausgelöst wird. Die Vorlagen scheinen jedoch nicht aktualisiert zu sein, und die Vorlagenhelfer werden nicht ausgelöst.

Die Route in meiner /lib/route.js Datei ist

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

Dann wie meine Vorlagen aussehen -

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

Mit einem einfachen Helfer die selected Klasse des li Element hinzufügen -

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

Ich denke, ich muss missverstehen, wie (und wann) templ Ates werden gerendert.

Was muss ich tun, um diese Vorlagen erneut zu rendern, wenn sich die Route ändert?

Answer 1

Flow Router wurde entwickelt, um so zu arbeiten. Es wird nicht automatisch neu gerendert.

Eine einfache Lösung besteht darin, in alle Template-Helfer hinzuzufügen, die von den Parametern einer Route abhängig sind.

Also in diesem Fall die sidebar.js aktualisieren -

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

Wenn die Helfer in der sidebarItem Vorlage verwendet wird nun aktualisiert, wenn der Pfad ändert.