Meteor & Flow Router: Markierung Dynamisch generierte Pfade als 'aktiv'

Question

Unnötig zu sagen, dass meine Erfahrung mit Meteor fehlt. Ich komme von einem Rails-Hintergrund, in dem Sie viel mehr Logik (und Magie) in Ihren Ansichten als Meteor machen können.

Die Situation: Ich habe einige Routen bekam, die wie aussehen, und ich habe diesen Weg ‚Ding‘ genannt, weil es things viele besaß nur eine thing eines Benutzers zeigt:

FlowRouter.route('/things/:_id', { 
    name: 'thing', 
    action() { 
     BlazeLayout.render('appPage', {app: 'thing', sidebar: "thingsListOnThing", header: 'thingTitle'}); 
    } 
}); 

Wie Sie Sehen Sie, ich lade auch eine Vorlage, die ich gebaut habe, um alle im Besitz des Benutzers befindlichen Dinge auf der sidebar für die einfache Navigation aufzulisten. Diese Vorlage, thingsListOnThing, ist das Ziel dieser Frage.

Holen Sie sich das Wesentliche? Ich bin in der Lage, die Route zu markieren, die eine Vorlage mit einer vollständigen Liste eines Benutzer dislays things als active mit zimme:active-route wie so:

// A list of all a user's things 
<div class="{{isActiveRoute name='things' class='is-active'}}"> 
List of Things 
</div> 

Dieses Paket ist groß, aber es wird mir nicht mit Routen helfen, die aussehen wie weil, dann wäre jeder Link zu jeder einzelnen Sache is-active auf jeder thing Seite, nicht nur die, wo der aktuelle Pfad :_id der _id der aktiven thing entspricht.

Ich bin wirklich hier fest. Meine erste Vermutung wäre, Template-Helfer zu verwenden, aber ich bin verwirrt, wo ich damit anfangen soll.

Wenn es notwendig ist, laden Sie bitte jedes Stück meines Codes, den Sie benötigen. Ich dachte mir, dass es so eine allgemeine Frage ist, dass ihr wahrscheinlich nicht meinen gesamten Code sehen müsst, um zu verstehen, was ich zu erreichen versuche.

Answer 1

Verwendung: zimme:active-route

Template Helfer

Template.listOfThings.helpers({ 
    activeListClass(page) { 
    const active = ActiveRoute.name('thing') && FlowRouter.getParam('_id') === this._id; 
    return active && 'active'; 
    }, 
}); 

Vorlage HTML:

<a class="{{isActivePath 'thing'}}" href="/things/{{_id}}"> 
     <div class="thingListItem {{activeListClass page}}"> 
     {{title}} 
     </div> 
    </a>