Meteor 评论

由 北公爵无欢 创建，路飞 最后一次修改 2016-08-12 评论社交新闻网站的目标是创建一个用户社区，如果没有提供一种方式让人们互相交流，这将是很难做到的。因此在本章中，我们添加评论！我们首先创建一个新的集来存储评论，并在该集中添加一些初始数据。Comments = new Mongo.Collection('comments');// Fixture dataif (Posts.find().count() === 0) { var now = new Date().getTime(); // create two users var tomId = Meteor.users.insert({ profile: { name: 'Tom Coleman' } }); var tom = Meteor.users.findOne(tomId); var sachaId = Meteor.users.insert({ profile: { name: 'Sacha Greif' } }); var sacha = Meteor.users.findOne(sachaId); var telescopeId = Posts.insert({ title: 'Introducing Telescope', userId: sacha._id, author: sacha.profile.name, url: 'http://sachagreif.com/introducing-telescope/', submitted: new Date(now - 7 * 3600 * 1000) }); Comments.insert({ postId: telescopeId, userId: tom._id, author: tom.profile.name, submitted: new Date(now - 5 * 3600 * 1000), body: 'Interesting project Sacha, can I get involved?' }); Comments.insert({ postId: telescopeId, userId: sacha._id, author: sacha.profile.name, submitted: new Date(now - 3 * 3600 * 1000), body: 'You sure can Tom!' }); Posts.insert({ title: 'Meteor', userId: tom._id, author: tom.profile.name, url: 'http://meteor.com', submitted: new Date(now - 10 * 3600 * 1000) }); Posts.insert({ title: 'The Meteor Book', userId: tom._id, author: tom.profile.name, url: 'http://themeteorbook.com', submitted: new Date(now - 12 * 3600 * 1000) });}不要忘记来发布和订阅我们这个新的集合：Meteor.publish('posts', function() { return Posts.find();});Meteor.publish('comments', function() { return Comments.find();});Router.configure({ layoutTemplate: 'layout', loadingTemplate: 'loading', notFoundTemplate: 'notFound', waitOn: function() { return [Meteor.subscribe('posts'), Meteor.subscribe('comments')]; }});请注意，为了使用新的数据，你需要命令 Meteor reset 清除数据库。不要忘了创建一个新的用户，并重新登录！首先，我们在数据库中创建了几个（假的）用户，并从数据库中用他们的 id 选择出来。然后给第一篇添加注释，链接注释到帖子（postId）和用户（userId）。同时我们还添加了提交日期，评论内容和一个非规范化的作者 author 项。此外我们在路由器中增加等待一个含有评论和帖子订阅的数组。显示评论把评论存到数据库，同时还需要在评论页上显示。<template name="postPage"> {{> postItem}} <ul class="comments"> {{#each comments}} {{> commentItem}} {{/each}} </ul></template>Template.postPage.helpers({ comments: function() { return Comments.find({postId: this._id}); }});我们把 {{#each comments}} 块放在帖子模板里面，所以在 comments helper 里，this 指向的是当前帖子。要找到相关的评论，我们可通过 postId 属性找到链接到该帖子的评论。我们已经了解 helper 和 Spacebars 后，显示一个评论是相当简单的。我们将在 templates 下，创建一个新的 comments 目录和一个新的 commentItem 模板，来存储所有的评论相关的信息：<template name="commentItem"> <li> <h4> <span class="author">{{author}}</span> <span class="date">on {{submittedText}}</span> </h4> <p>{{body}}</p> </li></template>让我们编写一个模板 helper 来帮助我们把 submitted 提交日期格式人性化的日期格式：Template.commentItem.helpers({ submittedText: function() { return this.submitted.toString(); }});然后，我们将在每个帖子中显示评论数：<template name="postItem"> <div class="post"> <div class="post-content"> <h3><a href="{{url}}">{{title}}</a><span>{{domain}}</span></h3> <p> submitted by {{author}}, <a href="{{pathFor 'postPage'}}">{{commentsCount}} comments</a> {{#if ownPost}}<a href="{{pathFor 'postEdit'}}">Edit</a>{{/if}} </p> </div> <a href="{{pathFor 'postPage'}}" class="discuss btn btn-default">Discuss</a> </div></template>添加 commentsCount helper 到 post_item.js 中：Template.postItem.helpers({ ownPost: function() { return this.userId === Meteor.userId(); }, domain: function() { var a = document.createElement('a'); a.href = this.url; return a.hostname; }, commentsCount: function() { return Comments.find({postId: this._id}).count(); }});现在您应该能够显示初始的评论并看到如下的内容：提交新评论让用户创建新的评论，这个过程将是非常类似过去我们允许用户创建新的帖子。首先我们通过在每个帖子底部增加一个提交框：<template name="postPage"> {{> postItem}} <ul class="comments"> {{#each comments}} {{> commentItem}} {{/each}} </ul> {{#if currentUser}} {{> commentSubmit}} {{else}} <p>Please log in to leave a comment.</p> {{/if}}</template>然后创建评论表单模板：<template name="commentSubmit"> <form name="comment" class="comment-form form"> <div class="form-group {{errorClass 'body'}}"> <div class="controls"> <label for="body">Comment on this post</label> <textarea name="body" id="body" class="form-control" rows="3"></textarea> <span class="help-block">{{errorMessage 'body'}}</span> </div> </div> <button type="submit" class="btn btn-primary">Add Comment</button> </form></template>在 comment_submit.js 中调用 comment 方法，提交新的评论，这是类似于过去提交帖子的方法：Template.commentSubmit.onCreated(function() { Session.set('commentSubmitErr