Advertisement
  1. Code
  2. Web Development
Code

Get Started Building Your Blog With Parse.js: Edit

by
Difficulty:BeginnerLength:LongLanguages:
This post is part of a series called Building Your Blog with Parse.js.
Get Started Building Your Blog With Parse.js: Router
Get Started Building Your Blog With Parse.js: Refactor
Final product image
What You'll Be Creating

In our last session, we built a view for managing existing blog posts, and we went through the idea of a router. Now, it's time to build out the editing function.

1. Create and Render EditBlogView

To build an edit function, let's first make an EditBlogView. Again, this should be very easy for you now. We've walked a long way together.

Step 1: HTML Template

This part is very similar to the AddBlogView template. The only real difference is that because we are editing a blog, we need to pass in the existing title and content.

Step 2: EditBlogView

And then the EditBlogView. Again, this is very similar to AddBlogView. For the purpose of this tutorial, we are focusing on how to make it work first. In the next session, we will do all the cleaning up work, and remove duplicated code. Bear with me for now.

This time, we are not going to first check and make sure this part of the code works—ideally you've done this enough times that you should feel comfortable moving on. Always check the previous sessions or leave me a comment if you feel stuck.

2. Link to the /edit Page With Router

Now, let's make sure /edit/ will link to and render the correct edit view.

Step 1: /edit/:id

Last time, we already did part of the preparation. We have the URL pattern for the /edit page in BlogRouter.routes:

As you can see, the URL pattern is already pointing to the BlogRouter.edit() function, in which we have a little placeholder function that takes in the url parameter input:

This means that if you visit http://localhost/your-directory/edit/what-ever-you-put-here, the BlogRouter.edit() function will be triggered, and the variable url within that function will get the value of what-ever-you-put-here.

So now, what's the easiest thing to put after /edit that can help us find the exact blog post that we want to edit? It should be id, right? Let's change the code a little bit so it's clear that we will be putting id there.

Step 2: Get a Blog by Its Id

Now that we've got the id from the URL, we need to find that specific blog with this id. The way to do that in Parse.js is using a query:

If you want to know more about Parse queries, check their documentation.

Step 3: Render editBlogView

Let's continue to finish the success and error functions in the query callback.

For the success function, we want to render an editBlogView using that blog post as the model:

And for the error function, let's just log the error as usual:

Step 4: Link to /edit Page

Moving on, let's update the edit links in #blogs-admin-tpl so they actually link to /edit pages. Let's also give it a unique class because we will be referring to it:

And to make sure the router gets the URL change (because it's not static yet), let's write our own link function to replace the default one in BlogAdminView.

First, add an event for clicking .app-edit. That's why we needed a class before!

Then within the edit() function, prevent the default action, get the href value, and use blogRouter.navigate() to trigger it.

Now we can test it out:

blogEditView

The testing could be a little hard at this point because the router is not fully set up yet. Just go to http://localhost/your-directory/admin.html as a starting point every time you refresh. We will take care of this in the next session.

3. Submit Blog Edit

We are so close to getting this page functioning. We just need to make the EditBlogView.submit() function work.

Step 1: Blog.update() 

Just as we created the Blog.create() function for adding a new blog, we now need to create a Blog.update() function to save our edits.

As you can see, it's very similar to the .create() function, but instead of creating and saving a new blog, you set the value on the current object first, and then save it.

Step 2: EditBlogView.submit()

Now let's get the data from the form in EditBlogView and call the .submit() function on the model (which refers to the current blog post rendered in the edit view). Again, very similar to the one in AddBlogView:

Give it a try, and it should be working!

BlogSaved

If you've followed the tutorial to this point, well done indeed.

4. Bonus: Readable URL

If you don't like to see the id in the url, and want to have it be like /edit/your-blog-title/, you can do it pretty easily, too.

Just add a new field url to your blog posts, and add it in the .create() function:

And in BlogRouter.edit(), query blog posts by their url value:

I won't be giving all the code here, because I think you can piece it together now!

Conclusion

Now everything should be coming together for you. You've made a ton of progress so far. In this session, we created the whole editing feature for the blog: from preparing the page, to setting up the router, and then to updating the database.

Next time, we will do a big cleanup in our codebase. Now we have a lot of overlapping code here and there, because we just want to make sure we can build the functions to work. Next time, you will merge index.html and admin.html, .create() and .update(), AddBlogView and EditBlogView. You will also learn to build a solid application structure with Parse.js. 

What else? We will also revisit the router, so the URLs can be static (which means you can bookmark it, refresh the page, or send it to your friend). Lots of good stuff to come, so stay tuned!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.