Series: Building the CRUD-builder

CRUD pt 2-Create

Published on May 03, 2015

We continue making our CRUD interface, this time going in depth with the Create action.

We go over a naive implementation, then a better implementation. Finally, we see a way to DRY up our code with a component.



In the last episode, we made the first part of a CRUD interface. We did the read, update and delete actions. The create action is a little bit trickier and that's what we're going to do today. We're going to first do the naïve version. We're going to show what goes wrong when that happens, and then we're going to show a better version.

Naive Create

Let's go to our posts template and put in a button that will trigger the new action. So far so good. Then in our posts route, we'll have an action which creates a post and then takes us to the edit page for that post. This is where things start to go wrong.

Let's hit that new button and see what happens. Now we're at the route posts/null/edit. We don't have an ID of the post. That's because we haven't saved it to the server yet. It also adds it to our list, an empty thing to our list. Let's pretend that we're okay with that. We'll make a title and create it and this looks like it's working but what if we reload? We see that it's null so it doesn't work because there's nothing with a null ID.

This is a workflow that will sometimes work, sometimes not. Let's create a better create workflow.

A Better Create

In this new way, we replace the action with a link to a posts route so we can delete the action, and then we'll take advantage of our posts new route. Let's start with our template. We'll take the things from post edit and just paste them in while changing a few things.

We replaced model with new post, which is a temporary object that we're going to create in the controller. It's a temporary object, just to hash the values that we will eventually, when we hit save, used to create a record. Once we hit save, we'll create the record using this temporary object, and then we'll save it and then we'll transition to show.

We can see this working in our app. We hit new, we create a new title, and notice that it's posts/new instead of post/null, and we hit save and we can reload the page just fine. It's a much better workflow, and when we hit new here, it's not adding anything to the end of the list.

That's a great workflow, but we did copy and paste from a template, so let's clean that up a little bit.

DRY Create and Edit templates

Here are the new and the edit templates side by side. We can dry this up a little bit by copying this and then pasting it into a new component that we'll call edit-fields. We'll put it under post. We’ll call it edit-fields and then we'll just create the template. We won't need the Javascript portion of the component.

In here, we can call our template post/edit-fields and then we will feed it the model. We can do the same thing here, post/edit-fields and we'll feed the model as newPost.

This works really well right now because of two-way data binding so if we change something in the model, in edit fields, it will automatically propagate back up here, so we can take action on it in the new or the edit routes. Later, when we have one way data binding by default only to do a mutation, we need to specify the mutation.

Let's go ahead and look at this at work. We reload, it looks just the same as before. It works just the same as before and the editing works as well. It works exactly as before but now there is significantly less repetition.

Next week: DRY out your process with ember-cli Blueprints

In this episode, we learned how to create a record. Creating is one of the more complicated of the four CRUD operations. The four CRUD operations, which are essential to software where you are manipulating data. I hope this helps you when you're creating your own application.

You might have to expand on this if you have special requirements, but if you don't, there's good news. You won't have to repeat all this work because next week, we are learning about blueprints. Specifically, we're going to be making a set of blueprints that can autogenerate a lot of this CRUD for you. I'll see you then.

Building the CRUD-builder

Subscribe to our mailing list