Ad

Meteor Flow Router Setting Up Example.com/singlePostPage

I can not manage to create the routes to show a single post with flowrouter and blaze in Meteor.

This is what I have so far which I am sure its mostly wrong!

publications.js

Meteor.publish('singlePost', function (postId) {
  return Posts.find({ _id: postId });
});

Router.js

FlowRouter.route("/posts/:_id", {
    name: "postPage",
    subscriptions: function (params, queryParams) {
     this.register('postPage', Meteor.subscribe('singlePost'));
 },
    action: function(params, queryParams) {
        BlazeLayout.render("nav", {yield: "postPage"} )
    }
});

singlePost.JS

Template.postPage.helpers({
  thisPost: function(){
    return Posts.findOne();
  }
});

singlePost.html

<template name="postPage">
  {{#with thisPost}}
    <li>{{title}}</li>
  {{/with}}
</template>

I used to do it back then with Iron router but now got confused with Flow router.

Ad

Answer

First don't use the FlowRouter subscriptions. That will soon be deprecated. Use Meteor PubSub. First in the routes.js:

    // http://app.com/posts/:_id
    FlowRouter.route('/posts/:id', {
        name: "postPage",
        action: function(params, queryParams) {
            BlazeLayout.render("nav", {yield: "postPage"} )
        }
    });

Then when the template is created you subscribe using Meteor's subscription:

// Template onCreated
Template.postPage.onCreated(function() {
    // Subscribe only the relevant subscription to this page
    var self = this;
    self.autorun(function() { // Stops all current subscriptions
        var id = FlowRouter.getParam('id'); // Get the collection id from the route parameter
        self.subscribe('singlePost', id); // Subscribe to the single entry in the collection with the route params id
    });
});

Then the helper will be:

// Template helper functions
Template.postPage.helpers({
    thisPost: function() {
        // Get the single entry from the collection with the route params id
        var id = FlowRouter.getParam('id');
        var post = Posts.findOne({ // Get the selected entry data from the collection with the given id.
            _id: id
        }) || {};
        return post;
    }
});

You also need to check if the subscriptions are ready in html.

{{#if Template.subscriptionsReady}}
    {{#with thisPost}}
        <li>{{title}}</li>
    {{/with}}
{{else}}
    <p>nothing to show</p>
{{/if}}
Ad
source: stackoverflow.com
Ad