开始使用Parse.js构建博客：类别

您将要创造的

首先，欢迎阅读本系列教程的结局！

上一课，我向您展示了如何向博客添加新功能：添加评论。 它几乎是一个独立功能。 在本次会议上，我将向您展示如何向您的博客系统添加类别。 这是一项更加艰巨的任务，因为其代码将与现有代码更加紧密地交织在一起。

分类模型

步骤1：类别类别

您知道演练：模型永远是第一位的。 Parse.com上的另一个新类： Category类。 应该很简单。 我们只需要一个自定义字段：

• 字串name

让我们创建两个虚拟类别以使其更易于测试：

步骤2：Blog类表中的类别字段

现在，在Parse.com上的Blog类表中添加一个新列，并使其指向Category 。

让我们还将它们链接到几篇博客文章。

步骤3：评论对象

接下来，是blog.js的Comment对象。 同样，它可以非常简单。

Category = Parse.Object.extend('Category', {});

步骤4：评论集

和集合：

Categories = Parse.Collection.extend({
	model: Category
})

在“写博客”表单中添加类别下拉列表

第1步：获取类别

就像在注释中一样，让我们​​在渲染WriteBlogView时获取注释。

render: function(){
	...
	var self = this,
		categories = new Categories();
	categories.fetch().then(function(categories){
		attributes.categories = categories.toJSON();
		self.$el.html(this.template(attributes)).find('.write-content').wysihtml5();
	});
}

第2步：找到当前类别

接下来，当您正在编辑的博客帖子存在现有类别时，我们需要找到当前类别。 我们只要通过循环attribute.categories阵列和组selected以TRUE为正确的范畴。

categories.fetch().then(function(categories){
	attributes.categories = categories.toJSON();
	// Get current selected category
	if (attributes.category) {
		attributes.categories.forEach(function(category, i){
			if (category == attributes.category) {
				attributes.categories[i].selected = true;
			}
		});
	}
	console.log(attributes);
	self.$el.html(self.template(attributes)).find('.write-content').wysihtml5();
});

步骤3：在下拉菜单中呈现类别

在HTML中，在<select>菜单中呈现类别：

   
   

	
    
    Category
	
    
    

		{{#each categories}}
		<option value="{{objectId}}" {{#if selected}}selected{{/if}}>{{name}}</option>
		{{/each}}
	

   
   

步骤4：记录所选类别

现在，将其记录在WriteBlogView submit()函数中：

submit: function(e) {
	...
	this.model.update({
		title: data[0].value,
		category: data[1].value,
		summary: data[2].value,
		content: data[3].value
	});
}

然后在Blog.update()函数中：

Blog = Parse.Object.extend('Blog', {
	update: function(data) {
		...
		var category = new Category();
		category.id = data.category;
		this.set({
			'title': data.title,
			'category': category,
			...
		}).save(null, {
			...
		});
	}
})

请注意，您不仅可以放下类别ID，还需要创建一个新的category实例，并将其ID设置为从表单中获得的类别ID。

给它一个测试，希望您可以看到它正确记录在数据库中：

分类页面

现在让我们继续创建一个链接到不同类别的侧边栏。

步骤1：清理并制作模板

首先，取出侧边栏的所有静态HTML代码：

然后为类别菜单的模板创建一个新的模板div：

步骤2：CategoriesView

然后，为以下类别列表创建一个视图：

CategoriesView = Parse.View.extend({
	template: Handlebars.compile($('#categories-tpl').html()),
	render: function() { 
		var collection = { category: this.collection.toJSON() };
		this.$el.html(this.template(collection));
	}
})

步骤3：渲染CategoriesView

因为类别列表在每个页面上，所以我们可以在BlogRouter.initialize()创建一个共享变量：

initialize: function(options){
	this.blogs = new Blogs();
	this.categories = new Categories();
}

然后在.start()函数中呈现它：

start: function(){
	...
	this.categories.fetch().then(function(categories){
		var categoriesView = new CategoriesView({ collection: categories });
		categoriesView.render();
		$('.blog-sidebar').html(categoriesView.el);
	});
}

试试看，现在呈现：

因为我们现在有了一个共享变量，所以我们也可以在WriteBlogView.render()使用它：

步骤4：添加路由器

现在，我们只需要使/category/{{objectId}}工作即可。

让我们首先添加此路由器模式：

routes: {
	...
	'category/:id': 'category'
}

然后，编写category函数。 这非常简单，只是到目前为止您已经学到的东西的组合：

category: function(id) {
	// Get the current category object
	var query = new Parse.Query(Category);
	query.get(id, {
		success: function(category) {
			// Query to get the blogs under that category
			var blogQuery = new Parse.Query(Blog).equalTo("category", category).descending('createdAt');
			collection = blogQuery.collection();
			// Fetch blogs
			collection.fetch().then(function(blogs){
				// Render blogs
				var blogsView = new BlogsView({ collection: blogs });
				blogsView.render();
				$container.html(blogsView.el);
			});
		},
		error: function(category, error) {
			console.log(error);
		}
	});
}

现在一切正常。

结论

哇，我无法相信我花了这么长时间才能完成整个系列赛。 在过去的十堂课中，您大致了解了有关Parse.js和Web开发的知识。 我们共同构建了一个具有全部功能的博客系统：添加，编辑，删除，登录，评论，以及本次会议的类别。

希望本系列对您有所帮助。 请与我分享您希望我将来涵盖的反馈，建议和内容。 而且，如果您使用本教程中的技术制作了任何Web项目，我也希望看到它们。

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