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

Posted 2023-03-08

【中文标题】使用 Blaze 和空格键访问 Meteor 应用程序中的嵌套对象

【英文标题】：Accessing nested objects in a Meteor application using Blaze and Spacebars

【发布时间】：2016-05-30 21:04:54

【问题描述】：

我正在为教育目的进行 Meteor 项目。这是一个带有帖子列表页面和帖子详细信息页面的博客，登录用户可以在其中添加 cmets。免责声明：在项目中，我不能使用 aldeed-simple 模式，也不会使用 pub/sub 方法。我正在使用 iron-router 和 accounts-password 包进行用户身份验证。

第一步

我已经设置了一个基本的应用布局和一个基本的路由：

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 步

我在评论模板中添加了一个事件助手，以便添加用户 cmets。该表单采用评论和用户 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 = "";           
    
   
  );

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

我已插入一些 cmets，但无法在页面上显示。相反，我为每个评论和用户 ID 获取一个 Object 对象。如果我去控制台，这是我的对象：

如何访问这些对象并在页面上显示这些字段值（cmets 和用户）？有什么帮助吗？谢谢桑德罗。

【问题讨论】：

你试过像#each comment in comments <li>comment.comments</li> /each 这样渲染属性吗？

谢谢。现在它起作用了。我修改了我的模板：#each comment in comments <li>comment.comments</li> <li>comment.user</li>/each 。现在我可以显示这些值了。

【参考方案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;
        
    
);