Template helpers for meteorhacks:flow-router, pathFor, subsReady, urlFor, queryParam
CoffeeScript JavaScript HTML
Latest commit 0910beb Jun 13, 2016 @banglashi banglashi bump version
Permalink
Failed to load latest commit information.
client added custom route option helper Apr 29, 2016
LICENCE added licence Aug 17, 2015
Readme.md bump version Jun 13, 2016
package.js bump version Jun 13, 2016

Readme.md

Helpers for FlowRouter

Template helpers for kadira:flow-router

  • subsReady
  • isSubReady (deprecated)
  • pathFor
  • urlFor
  • param
  • queryParam
  • currentRouteName
  • currentRouteOption

Content blocks

  • linkTo

See zimme:active-route for using the following helpers

  • isActiveRoute
  • isActivePath
  • isNotActiveRoute
  • isNotActivePath

On the server it exports FlowRouterHelpers, with:

  • urlFor
  • pathFor

Install

meteor add arillo:flow-router-helpers

Demo

https://flowrouterhelpers.meteor.com

Examples

https://github.com/arillo/meteor-flow-router-helpers-example

Usage subsReady

If you call subsReady without parameters it will check for all flow-router subscriptions to be ready. (It will not take into account the template level subscriptions you define)

If you pass parameters it will just check for this specific flow-router subscriptions to be ready. The parameters would be the subscription names you used when registering them on FlowRouter, like:

FlowRouter.route('/posts', {
    subscriptions: function(params, queryParams) {
        this.register('posts', Meteor.subscribe('posts'));
        this.register('items', Meteor.subscribe('items'));
    }
});
{{#if subsReady 'items' 'posts'}}
  <ul>
  {{#each items}}
    <li>{{title}}</li>
  {{/each}}
  </ul>
  <ul>
  {{#each posts}}
    <li>{{title}}</li>
  {{/each}}
  </ul>
{{/if}}

Usage isSubReady (deprecated)

Checks whether your subscription is ready. If you don't pass a subscription name it will check for all subscriptions.

{{#if isSubReady 'items'}}
  <ul>
  {{#each items}}
    <li>{{title}}</li>
  {{/each}}
  </ul>
{{/if}}

Usage pathFor

Used to build a path to your route. First parameter can be either the path definition or, since version 1.2.0 of flow-router, the name you assigned the route. After that you can pass the params needed to construct the path. Query parameters can be passed with the query parameter.

Notice: To deparameterize the query string we are currently using the not yet official accessor for the query lib in page.js via FlowRouter._qs

<a href="{{pathFor '/post/:id' id=_id}}">Link to post</a>
<a href="{{pathFor 'postRouteName' id=_id}}">Link to post</a>
<a href="{{pathFor '/post/:id/comments/:cid' id=_id cid=comment._id}}">Link to comment in post</a>
<a href="{{pathFor '/post/:id/comments/:cid' id=_id cid=comment._id query='back=yes&more=true'}}">Link to comment in post with query params</a>

Server side it can be used like this: FlowRouterHelpers.pathFor('/post/:id',{ id:'12345' })

Usage urlFor

Same as pathFor, returns absolute URL.

{{urlFor '/post/:id' id=_id}}

Usage linkTo

Custom content block for creating a link

{{#linkTo '/posts/'}}
  Go to posts
{{/linkTo}}

will return <a href="/posts/">Go to posts</a>

Usage param

Returns the value for a url parameter

<div>ID of this post is <em>{{param 'id'}}</em></div>

Usage queryParam

Returns the value for a query parameter

<input placeholder="Search" value="{{queryParam 'query'}}">

Usage currentRouteName

Returns the name of the current route

<div class={{currentRouteName}}>
  ...
</div>

Usage currentRouteOption

This adds support to get options from flow router

FlowRouter.route("name", {
  name: "yourRouteName",
  action() {
    BlazeLayout.render("layoutTemplate", {main: "main"});
  },
  coolOption: "coolOptionValue"
});
<div class={{currentRouteOption 'customRouteOption'}}>
  ...
</div>

Changelog:

0.5.2 - Add currentRouteOption
0.5.0 - Add linkTo custom content block. Allow use of pathFor & urlFor on the server
0.4.6 - Add hashbang option to pathFor
0.4.4 - added currentRouteName helper
0.4.3 - added param helper
0.4.0 - updated to use kadira:flow-router
0.3.0 - changed isSubReady in favor of subsReady