变量没有用Meteor正确地呈现为HTML(可能是数据上下文问题)



我正试图在我的网页中创建一个链接,链接到每个用户的帖子。我已经成功地为每个帖子创建了新的页面(message.html)(这个网页的"Hello World"显示正确,见下文)。然而,与我的主页面相反,我想呈现到HTML中的变量无法显示。提前感谢!

注意事项:路由已使用Flow Router完成。

以下是相关的代码片段:

Message.js(或html的控制器)

import { Meteor } from 'meteor/meteor';
import { Template } from 'meteor/templating';
import { Boosts } from '../api/boosts.js';
import './boost.js';
import './message.html';
Template.ApplicationLayout2.onCreated(function messagesOnCreated() {
Meteor.subscribe('messages');
});
Template.boostPage.helpers({
messages() {
return Boosts.findOne(this._id());
},
});

Message.html(或打开新页面时显示的html)

注意:这个html中的Hello World是一个可以在浏览器中有效显示的示例。

<template name="ApplicationLayout2">
Hello World
{{> boostPage}}
</template>
<template name="boostPage">
{{#with messages}}
<h2>Boost: {{text}}</h2>
<q class="message">{{message}}</q>
{{/with}}
</template>

Boosts.js(相关部分)(Meteor.publish('Boosts',函数boostsPublication()…)与此问题无关,但我将其包含在内以保持代码的原始格式)

import { Meteor } from 'meteor/meteor';
import { Mongo } from 'meteor/mongo';
import { check } from 'meteor/check';
import { Match } from 'meteor/check';
export const Boosts = new Mongo.Collection('boosts'); 
if (Meteor.isServer) {
Meteor.publish('boosts', function boostsPublication() {
return Boosts.find({
$or: [
{ private: { $ne: true } },
{ owner: this.userId },
],
});
});
Meteor.publish('messages', function messagesPublication() {
return Boosts.find({
{_id: this._id},
});
});
}

Routes.js

FlowRouter.route('/', {
name:'home',
action() {
BlazeLayout.render('ApplicationLayout');
}
});

FlowRouter.route('/boosts/:_id', {
name:'messages',
action: function() {
BlazeLayout.render("ApplicationLayout2", {_id: this._id});
}
});

编辑#1我包含了zim建议的更正。

Message.js(或html的控制器)

import { Meteor } from 'meteor/meteor';
import { Template } from 'meteor/templating';
import { Boosts } from '../api/boosts.js';
import { ReactiveVar } from 'meteor/reactive-var';
import './boost.js';
import './message.html';
Template.Message.onCreated(function() {
// get the message id from the route parameter
let messageId = FlowRouter.getParam('messageid');
// save it to a reactive var so the helper can use it
this.messageId = new ReactiveVar(messageId);
// subscribe to 1 message using that message id
this.subscribe('message', messageId);
});
Template.Message.helpers({
// get data for 1 message
message() {
let messageId = Template.instance().messageId.get();
return Boosts.find({_id: messageId});
}
});

Message.html(或打开新页面时显示的html)

注意:浏览器中显示Hello WorldBoost:标题以及引号之间的对象对象

<template name="Message">
Hello World
{{#with message}}
<h2>Boost: {{text}}</h2>
<q class="message">{{message}}</q>
{{/with}}
</template>

Boosts.js(相关部分)(Meteor.publish('Boosts',函数boostsPublication()…)与此问题无关,但我将其包含在内以保持代码的原始格式)

import { Meteor } from 'meteor/meteor';
import { Mongo } from 'meteor/mongo';
import { check } from 'meteor/check';
import { Match } from 'meteor/check';
export const Boosts = new Mongo.Collection('boosts');
if (Meteor.isServer) {
// This code only runs on the server
// Only publish boosts that are public or belong to the current user
Meteor.publish('boosts', function boostsPublication() {
return Boosts.find({
$or: [
{ private: { $ne: true } },
{ owner: this.userId },
],
});
});
// Publish only the message corresponding to the boost in question
Meteor.publish('message', function(messageId) {
return Boosts.find({_id: messageId});
});
}

Routes.js

FlowRouter.route('/', {
name:'home',
action() {
BlazeLayout.render('ApplicationLayout');
}
});

FlowRouter.route('/boosts/:messageid', {
name:'messages',
action: function() {
BlazeLayout.render("Message", {messageid: this._id});
}
});

在此发布中:

Meteor.publish('messages', function messagesPublication() {
return Boosts.find({
{_id: this._id},
});
});

你期望"this.id"代表什么?你把它登录到控制台了吗?我怀疑它没有定义。

更新:

假设你有一条这样的路线:/message/:messageid

你可以有这样一个单一的消息模板:

Message.html:

<template name="Message">
{{#with message}}
{{content}}    <!-- or some field within message -->
{{/with}}
</template>

消息.js:

Template.Message.onCreated(function() {
// get the message id from the route parameter
let messageId = FlowRouter.getParam('messageid');
// save it to a reactive var so the helper can use it
this.messageId = new ReactiveVar(messageId);
// subscribe to 1 message using that message id
this.subscribe('message', messageId);
});
Template.Message.helpers({
// get data for 1 message
message() {
let messageId = Template.instance().messageId.get();
return Boosts.find({_id: messageId});
}
});

这是一个简单的模板,用于获取单个消息的数据并显示它。现在您需要发布该单个消息:

server.js:

Meteor.publish('message', function(messageId) {
return Boosts.find({_id: messageId});
});

这是一种方法。注意流程:路由器定义消息的id,模板订阅它,告诉服务器发布它,然后助手对发布的数据进行查找。

您还可以创建一个在消息中循环的模板。在这里,我们订阅了所有的消息数据,并将其全部发布。(注意我是如何用单数和复数命名的,以帮助传达这个概念)

Messages.html:

<template name="Messages">
{{#each message in messages}}
{{message.content}}    <!-- or some field within message -->
{{/each}}
</template>

Messages.js:

Template.Messages.onCreated(function() {
// subscribe to all the messages
this.subscribe('messages');
});
Template.Messages.helpers({
// get data for all the messages
messages() {
return Boosts.find();
}
});

这会发布所有数据:

server.js:

Meteor.publish('messages', function() {
return Boosts.find();
});

在本例中,我们没有从路由中提取任何信息,而是循环遍历所有消息。

这有帮助吗?

最新更新