开始使用Parse.js构建博客：注释

您将要创造的

本教程系列即将结束。 如果您一直遵循，那么希望您对MVC框架以及Parse.js的工作原理有深入的了解。 上一课，我们实现了删除，注销和单个博客视图。 在本次会议中，我们将向单页视图添加评论区域。

评论部分将由两部分组成：顶部为评论表单，底部为该博客文章的评论列表：

因为您现在已经构建了许多功能，所以我将加快一点，并将内容分为三个主要步骤：

1. 创建评论模型。
2. 更新BlogView
3. 添加评论表格。

1.创建评论模型

步骤1：评论类别

模型始终是第一位的。 让我们继续前进，在Parse.com上创建一个新类。

这个新的注释类应具有以下字段：

• 指针blog
• 字符串authorName
• 字符串email
• 字符串content

指针指向它所属的博客文章，其他三个字段存储该评论的关键信息。 为了本教程的缘故，我不会让用户在这里注册并登录，但是您可以阅读User类上的Parse.js文档以获取更多详细信息。

步骤2：评论对象

接下来，让我们在blog.js文件中创建Comment模型。 您会注意到它与我们创建的Blog模型非常相似。 唯一的区别是我们不允许用户以后编辑其注释，因此我们使用的是.add()函数而不是.update()函数。 同样，如果需要，请随时使其可编辑。

Comment = Parse.Object.extend('Comment', {
})

2.更新BlogView

移动到视图，因为我们在这个注释部分BlogView ，我们可以呈现在评论BlogView为好。 我们将其放在.render()函数中。

第1步：获取评论

首先，我们需要获取当前博客的评论：

render: function() { 
	var self = this,
		attributes = this.model.toJSON(),
		// A new query to filter out all the comment in this blog
		query = new Parse.Query(Comment).equalTo("blog", this.model).descending('createdAt'),
		// Create a collection base on that new query
		collection = query.collection();
	// Fetch the collection
	collection.fetch().then(function(comments) {
		// Store the comments as a JSON object and add it into attributes object
		attributes.comment = comments.toJSON();
		self.$el.html(self.template(attributes));
	});
}

请注意，我们在查询中添加了.descending('createdAt') ，因此我们始终在顶部显示最新注释。

如果在渲染attributes之前立即记录attributes ，则可以看到对象的结构如下：

{
	ACL: Object,
	author: Object,
	authorName: "moyi",
	comment: Array[2],
	...
	__proto__: Object
}

您会看到注释存储为数组，并准备呈现。

步骤2：显示评论

现在，我们已将注释传递到attributeHTML模板中，现在可以使用handlebar.js语法遍历数组：

   
   
{{#if comment}}
Comments

• {{＃每个评论}}
• {{authorName}}说：
  {{内容}}
• {{/每}}

{{/如果}}

如果要先进行测试，请在数据库中的Parse.com上添加一些虚假评论，然后刷新此页面：

3.添加评论表

然后，我们可以继续添加评论表单。

步骤1：添加HTML

在注释部分的上方添加此HTML结构：

   
   
Leave a Comment

名称

电子邮件地址

评论

提交

步骤2：添加事件以提交表单

现在让我们在BlogView添加一个事件：

events: {
		'submit .form-comment': 'submit'
}

步骤3：构建submit（）函数

然后构建submit()函数。 如果您还记得我们是如何编写WriteBlogView函数的，则非常相似。

请注意，这次我们需要将this.model作为blog传递给新评论：

submit: function(e) {
	e.preventDefault();
	var data = $(e.target).serializeArray(),
		comment = new Comment();
	comment.add({
		blog: this.model,
		authorName: data[0].value, 
		email: data[1].value,
		content: data[2].value
	});
}

给它做一个测试，新注释肯定会显示在顶部：

结论

在本次会议中，您通过三个快速步骤构建了注释功能。 希望现在对您来说很容易，并且您可以自己编写大多数步骤。

在下一个会话中，我将向您展示最后一个功能：向博客添加类别。 之后，我将作为功能强大的Parse.js开发人员离开您。 请继续关注，让我留下您可能有的所有问题和反馈。

翻译自: https://code.tutsplus.com/tutorials/get-started-building-your-blog-with-parsejs-comments--cms-24185