簡體   English   中英

流星流路由器設置example.com/singlePostPage

[英]Meteor Flow Router setting up example.com/singlePostPage

我無法創建路線以顯示帶有flowrouter的單個帖子並在Meteor中大放異彩。

到目前為止,這是我所知道的,我確信這主要是錯誤的!

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>

那時我曾經使用Iron路由器來做,但是現在卻與Flow路由器混淆了。

首先,不要使用FlowRouter訂閱。 那將很快被棄用。 使用流星PubSub。 首先是routes.js:

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

然后,在創建模板后,您可以使用Meteor的訂閱進行訂閱:

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

然后該助手將是:

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

您還需要檢查html是否已准備好訂閱。

{{#if Template.subscriptionsReady}}
    {{#with thisPost}}
        <li>{{title}}</li>
    {{/with}}
{{else}}
    <p>nothing to show</p>
{{/if}}

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM