Create and Destroy
Published on May 18, 2014
Our video logging website is in need of new videos... and a way to add them! Then, once Mistakes Are Made, we'll need a way to delete videos. On the way, we'll learn a bit about Ember Data and promises.
Hey and welcome back. Today we're going to work on our video blogging service again. We're going to make it so you can create and destroy posts. As it is right now you can look at the posts and edit them, but if you want more than one, you're out of luck. We're going to change that.
We'll start off by adding a link-to helper to our post template. The button will say 'new post' and will link to the new post route. The application will complain that there's no new post route so let's create it. In our router, we're going to add the new route nested under posts so you'll get to it via the url post/new. Then in the folder posts we'll create new.js. So Ember App Kit will create a new post route that extends Ember.route, and in the model hook we're going to be turning a newly created record. This means that it won't save it to the server yet until we call save on it later and that's good because we don't want a lot of incomplete posts cluttering up our application.
Our new post link is here. The page works. Let's see what happens when we click it. Well, it creates a new post, which is what we're expecting, but then nothing is displayed here. That's because we haven't created a template for our new post. So I've created a file, new.handlebars in the post folder which is in the templates folder... and we'll see that it does display.
Now let's put a form in there. We'll go ahead and use the partial we've previously created for editing. It just has various fields and it shows up.
And now we'll need a button. Let's go ahead and create button and give an action of not 'createRecord' but 'saveRecord'... and we have our button. However, clicking it doesn't do anything because we haven't handled that action. To handle this action, I've created a new controller, and object controller, new.js and it is within the post folder in the controllers folder. So in our actions hash we've created a function called saveRecord. What it does is it gets the model and then it saves it. Let's see what happens.
So we're going to create a title called 'tests' -because we're creative- and it's going to be by you, the reader of this video... and we hit save, it maybe saves, let's reload. Yes, it saves! But we're still in the new posts page so we want it to take us to our page. To do that we're going to use Promises.
So once the save finishes then we're going to do whatever is in this function which is going to be transitioning to the route post for the post that we just created and here we need to have it on the scope of the controller. The reason we have to do this is because calling the function changes the scope, so we have to grab the scope here, then use it here. And now when we create a new post and just give it gibberish because we don't care anymore, it transfers us directly there. So we know how to create new posts now, however we realize it's pretty embarrassing to have a post called ooeuthoeuth on our blog so we're going to figure out how to create a delete button.
Let's add a second button with the action of deleteRecord. Then, when we test it out, nothing handled the action deleteRecord so let's fix that. Here I've added the method deleteRecord and it will get the model and call destroy record on it and then Ember data will take care of the rest.
So we'll go here and call delete... and it's gone! But we're still on the page for it so if we reload, it's not great. So let's go ahead and go to a different route. Call then to get a Promise and so once destroy record is done, we'll be going to the post index route and since we want the controller scope like before we have to do this little trick. And when you go to the posts, we're going to be deleting this thing and it goes straight back to the index... and that's how you create and destroy records in Ember.
You'll notice if you've done integration testing before that our workflow is very similar to doing TDD without integration tests. We knew what we wanted and then we saw what was failing on our way to getting it. I think the visual medium works better for an introductory screencast. However if you're doing your own work, I would recommend using integration tests for this case.
One last big announcement is I started a website. It holds all of the Sparkcasts so you could find them all in one place. Enjoy.