使用 Blaze 和空格键访问 Meteor 应用程序中的嵌套对象

Accessing nested objects in a Meteor application using Blaze and Spacebars

提问人:Sandro Palmieri 提问时间:2/18/2016 更新时间:2/19/2016 访问量:532

问:

我正在做一个用于教育目的的 Meteor 项目。这是一个带有帖子列表页面和帖子详细信息页面的博客,登录用户可以在其中添加评论。免责声明:在项目中,我不能使用 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

我创建了一个帖子详细信息视图,其中包括一个评论表单。找到下面的代码:

<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 = "";           
    }
   }
  });

在浏览器中查找下面的帖子详细信息视图:

enter image description here

我插入了一些评论,但无法在页面上显示。取而代之的是,我为每个注释和用户 ID 获取 Object 对象。如果我转到控制台,这是我的对象:enter image description here

如何访问这些对象并在页面上显示这些字段值(注释和用户)?有什么帮助吗?谢谢桑德罗。

MongoDB Meteor Meteor-Blaze 空格键

评论

1赞 chridam 2/19/2016
你有没有试过把属性渲染成这样?{{#each comment in comments}} <li>{{comment.comments}}</li> {{/each}}
0赞 Sandro Palmieri 2/19/2016
谢谢。现在它起作用了。我修改了我的模板:。现在我可以显示这些值了。{{#each comment in comments}} <li>{{comment.comments}}</li> <li>{{comment.user}}</li>{{/each}}

答:

3赞 Stephen Woods 2/19/2016 #1

发生这种情况是因为 {{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;
        }
    }
});