使用 Blaze 和空格键访问 Meteor 应用程序中的嵌套对象
Accessing nested objects in a Meteor application using Blaze and Spacebars
我正在做一个用于教育目的的 Meteor 项目。这是一个带有 post 列表页面和 post 详细信息页面的博客,登录用户可以在其中添加评论。免责声明:在项目中我不能使用 aldeed-simple 模式,我不会使用 pub/sub 方法。我正在使用 iron-router 和 accounts-password 包进行用户身份验证。
第 1 步
我已经设置了一个基本的应用程序布局和一个基本的路由:
Router.route('/posts', function () {
this.render('navbar', {
to:"navbar"
});
this.render('post_list', {
to:"main"
});
});
Router.route('/post/:_id', function () {
this.render('navbar', {
to:"navbar"
});
this.render('post_detail', {
to:"main",
data:function(){
return Posts.findOne({_id:this.params._id})
}
});
第 2 步
我创建了一个 post 详细视图,其中包含一个评论表单。找到下面的代码:
<template name="post_detail">
<div class="container">
<p>Title: {{title}}</p>
<h5>Description: </h5>
<p>{{description}}</p>
<h4>Comments</h4>
<ul>
{{#each comment in comments}}
<li>{{comment}}</li>
{{/each}}
</ul>
{{>comments}}
</div>
</template>
<!-- Comments -->
<template name="comments">
<form class="js-add-comment-form">
<input type="text" id="comment" class="form-control"/>
<button type="submit" class="btn btn-default js-add-comment">Add a comment</button>
</form>
第 3 步
我已将事件助手添加到评论模板以添加用户评论。该表单采用评论和用户 ID。请参阅下面的代码:
Template.comments.events({
'submit .js-add-comment-form': function(event) {
event.preventDefault();
var comment = event.target.comment.value;
console.log(comment);
var user = Meteor.userId();
var email = Meteor.user().emails[0].address;
console.log(email)
console.log(user);
if (Meteor.user()){
Posts.update(
{_id: this._id},
{$push: {comments: {comments:comment, user}}});
event.target.comment.value = "";
}
}
});
在浏览器中找到下面的 post 详细视图:
我插入了一些评论,但无法在页面上显示。相反,我为每个评论和用户 ID 获取对象对象。如果我去控制台,这是我的对象:
如何访问这些对象并在页面上显示这些字段值(评论和用户)?有什么帮助吗?谢谢桑德罗。
这是因为 {{comment}} 本身就是一个对象。下面是一些示例代码,用于获取消息 属性 显示:
<template name="post_detail">
<div class="container">
<p>Title: {{title}}</p>
<h5>Description: </h5>
<p>{{description}}</p>
<h4>Comments</h4>
<ul>
{{#each comment in comments}}
<li>{{comment.comments}} | {{emailForUser comment.user}}</li>
{{/each}}
</ul>
{{>comments}}
</div>
</template>
如果您想按照我上面的示例获取用户的电子邮件地址,您需要添加一个模板助手:
Template.post_detail.helpers({
emailForUser( id ) {
var user = Meteor.users.findOne({_id: id});
if( user ) {
return user.emails[0].address;
}
}
});
我正在做一个用于教育目的的 Meteor 项目。这是一个带有 post 列表页面和 post 详细信息页面的博客,登录用户可以在其中添加评论。免责声明:在项目中我不能使用 aldeed-simple 模式,我不会使用 pub/sub 方法。我正在使用 iron-router 和 accounts-password 包进行用户身份验证。
第 1 步
我已经设置了一个基本的应用程序布局和一个基本的路由:
Router.route('/posts', function () {
this.render('navbar', {
to:"navbar"
});
this.render('post_list', {
to:"main"
});
});
Router.route('/post/:_id', function () {
this.render('navbar', {
to:"navbar"
});
this.render('post_detail', {
to:"main",
data:function(){
return Posts.findOne({_id:this.params._id})
}
});
第 2 步
我创建了一个 post 详细视图,其中包含一个评论表单。找到下面的代码:
<template name="post_detail">
<div class="container">
<p>Title: {{title}}</p>
<h5>Description: </h5>
<p>{{description}}</p>
<h4>Comments</h4>
<ul>
{{#each comment in comments}}
<li>{{comment}}</li>
{{/each}}
</ul>
{{>comments}}
</div>
</template>
<!-- Comments -->
<template name="comments">
<form class="js-add-comment-form">
<input type="text" id="comment" class="form-control"/>
<button type="submit" class="btn btn-default js-add-comment">Add a comment</button>
</form>
第 3 步
我已将事件助手添加到评论模板以添加用户评论。该表单采用评论和用户 ID。请参阅下面的代码:
Template.comments.events({
'submit .js-add-comment-form': function(event) {
event.preventDefault();
var comment = event.target.comment.value;
console.log(comment);
var user = Meteor.userId();
var email = Meteor.user().emails[0].address;
console.log(email)
console.log(user);
if (Meteor.user()){
Posts.update(
{_id: this._id},
{$push: {comments: {comments:comment, user}}});
event.target.comment.value = "";
}
}
});
在浏览器中找到下面的 post 详细视图:
我插入了一些评论,但无法在页面上显示。相反,我为每个评论和用户 ID 获取对象对象。如果我去控制台,这是我的对象:
如何访问这些对象并在页面上显示这些字段值(评论和用户)?有什么帮助吗?谢谢桑德罗。
这是因为 {{comment}} 本身就是一个对象。下面是一些示例代码,用于获取消息 属性 显示:
<template name="post_detail">
<div class="container">
<p>Title: {{title}}</p>
<h5>Description: </h5>
<p>{{description}}</p>
<h4>Comments</h4>
<ul>
{{#each comment in comments}}
<li>{{comment.comments}} | {{emailForUser comment.user}}</li>
{{/each}}
</ul>
{{>comments}}
</div>
</template>
如果您想按照我上面的示例获取用户的电子邮件地址,您需要添加一个模板助手:
Template.post_detail.helpers({
emailForUser( id ) {
var user = Meteor.users.findOne({_id: id});
if( user ) {
return user.emails[0].address;
}
}
});