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:

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:

edit: function(id) {
// First, you need to define a new query and tell it which table should it go for
var query = new Parse.Query(Blog);
// If you are looking for object by their id,
// just pass the id as the first parameter in .get() function
query.get(id, {
success: function(blog) {
// If the blog was retrieved successfully.
},
error: function(blog, error) {
// If the blog was not retrieved successfully.
}
});
}

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:

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:

query.equalTo("url", url).find().then(function(blogs) {
// This query will return all the qualifying blogs in an array
// So just get the first one
// If you want to learn more, check out Parse.js's doc
var blog = blogs[0];
...
});

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!