Google+
4elements web design & consultancy

Shineyrock

web design & consultancy
Shineyrock web design & consultancy

Shineyrock

  1. web design en consultancy

blog

  1. Home
  2. blog
  3. lees
  4. Get Started Building Your Blog With Parse.js: Categories
  • like 8 14

    Get Started Building Your Blog With Parse.js: Categories

    1. January 2016
    2. Daily
    3. gelezen 810

    Final product image
    What You'll Be Creating

    First of all, welcome to the finale of this tutorial series!

    Last session, I showed you how to add a new function to the blog: adding comments. It’s pretty much a stand-alone feature. This session, I will show you how to add categories to your blog system. It’s a more difficult task, as its code will be more closely intertwined with the existing code.

    Category Model

    Step 1: Category Class

    You know the drill: the model always comes first. One more new class on Parse.com: the Category class. It should be very simple. We only need one custom field:

    • String name

    Let’s just create two dummy categories to make it easier for testing:

    categories

    Step 2: Category Field in the Blog Class Table

    Now, add a new column in the Blog class table on Parse.com and make it a pointer to Category.

    pointer

    Let’s also link them to several blog posts.

    posts

    Step 3: Comment Object

    Next, the Comment object in blog.js. Again, it can be very simple.

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

    Step 4: Comments Collection

    And the collection:

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

    Add a Category Dropdown in the Write a Blog Form

    Step 1: Fetch Categories

    Like in Comments, let’s fetch comments when we render 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();
	});
}

    Step 2: Find the Current Category

    Next, we need to find the current category when there’s an existing category for the blog post you are editing. We can just loop through the attribute.categories array and set selected to TRUE for the correct category.

    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();
});

    Step 3: Render Categories in a Dropdown Menu

    And in HTML, render categories in a <select> menu:

    <div class="form-group">
	<label for="category">Category</label>
	<select>
		{{#each categories}}
		<option value="{{objectId}}" {{#if selected}}selected{{/if}}>{{name}}</option>
		{{/each}}
	</select>
</div>

    Step 4: Record the Selected Category

    Now let’s record it in the submit() function in WriteBlogView:

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

    And then in the Blog.update() function:

    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, {
			...
		});
	}
})

    Notice that you can’t just put down the category id, but you need to create a new category instance, and set its id to the category id you get from the form.

    Give it a test, and hopefully you can see it correctly recorded in the database:

    New Post

    Category Pages

    Now let’s move on to create a sidebar that links to different categories.

    Step 1: Clean Up and Make a Template

    First, take out all the static HTML code for the sidebar:

    <div class="col-sm-3 col-sm-offset-1 blog-sidebar"></div>

    And then make a new template div for the template of category menu:

    <script id="categories-tpl" type="text/x-handlebars-template">
	<div class="sidebar-module">
		<h4>Categories</h4>
		<ol class="list-unstyled">
			{{#each category}}
			<li><a href="#/category/{{objectId}}">{{name}}</a></li>
			{{/each}}
		</ol>
	</div>
</script>

    Step 2: CategoriesView

    Then, make a View for this list of categories:

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

    Step 3: Render CategoriesView

    Because the list of categories is on every page, we can create a shared variable in BlogRouter.initialize():

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

    And then render it in the .start() function:

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

    Give it a try, and now it renders:

    sidebar

    Because we now have a shared variable, we can also use it in WriteBlogView.render():

    Step 4: Add Router

    Now we just need to make /category/{{objectId}} work.

    Let’s add this router pattern first:

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

    Then, write the category function. It’s fairly straightforward, just a combination of the things you’ve learnt so far:

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

    Now everything’s working.

    categoryPage

    Conclusion

    Wow, I can’t believe it took me this long to finish the whole series. In the past ten sessions, you’ve learnt a lot about Parse.js and web development in general. Together we’ve built a blog system with full functions: add, edit, delete, login, comments, and in this session, categories.

    I hope you find this series helpful. Please share with me your feedback, suggestions, and content you want me to cover in the future. And if you made any web projects using techniques from this tutorial, I would love to see them, too.

    Photo

    martijn broeders

    founder/ strategic creative bij shineyrock web design & consultancy
    e-mail: .(JavaScript must be enabled to view this email address)
    telefoon: 434 210 0245
    8
    Plaats reactie...
    4elements
    Comments

Per - categorie

Op - datum

Copyright © 1999 - 2026 Shineyrock web design en consultancy, Alle rechten voorbehouden / Algemene voorwaarden / Sitemap: XML, HTML, Images, Mobile, News