Join Justin Yost for an in-depth discussion in this video Create a new record, part of Ember.js Essential Training.
- View Offline
- [Teacher] To create a new record, we first need a model for our component to have access to. So to begin, we'll add a model hook for our bookmark's new route. We can open up our route file for the bookmark's new route at app, routes, bookmarks, new. In our Route.extend code block, we need to add a model hook, and in this case, because we're creating a new instance of the bookmark, we're going to call the stores method createRecord.
So this will look like return this.get('store').createRecord and pass the string of the model name that we are creating. For here, obviously it's going to be bookmark. Now what we need at this point is we need our component to then save the bookmark record. We don't need access to the store in our component, as the bookmark object itself has access to its own save method to persist the data to the server.
Let's open up the component now and start building in the ability for us to save our new bookmark record. We'll open up app, components, bookmarks, edit-form. We've already built some of the basics here, where we have our actions hook and we have a save hook already set up. To continue with this, we need first our component to have access to a bookmark property. So we'll add bookmark and set it equal to null. What we want to do after our save is successful, is we want to redirect to the index page.
Now normally to solve this problem, you need to either inject the router or use a controller action to respond to the save occuring and then transition there in the controller. In both of these cases, it's a fair bit of work to set up both of those abilities. The Ember guide has much more detailed information on performing both of those actions. In our case, we're going to do this the quick and dirty way: by injecting the private routing service. To do so, we'll add a new property, router, and we'll call the Ember.inject.service and the private routing service, which is behind a dash, routing.
Remember, this isn't the best solution to this particular problem, but it's gonna be much faster for us to see this all working. Remember our save action, that we're calling in our component? It gets past the current bookmark that we pass into our component. That bookmark is an Ember data record. That bookmark has access to its own save method, so we'll add a few lines in here and we can call directly bookmark.save.
This save method will then push our data to the server, and it will return a promise. And when that promise is resolved, it will call the then function, which will fulfill the promise. To add in our then function, we simply add in .then and it's a method call. Inside of this method call, we're going to add parentheses value for a value that is going to be returned back from our promise. We'll add equals arrow, curly braces, and in here we can then perform actions on this value after our promise has resolved.
In this case, we want to call Ember.Logger.info(value) and then we also wanna transition to our bookmark's index route. To do so, it is this.get, so we'll get the router property, and then we can call the transitionTo method and pass in the string for the route that we want to transition to.
In our case, bookmarks. So all together, this says when the promise resolves, we capture the return value, log it, and then transition to the bookmark's index route. So we'll save, log our save result, and immediately transition back to the index page. Next, we can add a catch method that will deal with what happens when the promise is rejected. To do so, after our then method, we'll add .catch.
Now this method, as opposed to our then method, does not actually return a value. So instead, we'll simply have parentheses, equal arrow, curly braces, and we'll simply log a string saying that it failed to save. So we'll call Ember.Logger.info and pass the string 'failure to save'. Now if we navigate over to our browser, and go to our bookmark's New page, and try adding a new bookmark, we'll add Link, this; Title, we'll set as title; and About, what is this string about.
If you look in your Ember Data tab, you'll notice we have an existing model of bookmark, and as we're updating each of those values for the Link, the Title, and the About, it's automatically getting set. Notice when we toggle the Public field, that also gets set automatically for us. And when we change About, that change is live. Now let's click Save, and we'll see that our record is returned as ID 21.
We'll see we get redirected back to the index page. And if we look in our console, we can see that our save was called. We can see that we pass back this object that we got back from our promise. We see that our POST was successful. And we see our successful request getting back to our bookmark's index page. So that's how easy it was to build up a new form to save a new record using Ember data.
- Why choose Ember?
- Installing Ember.js and Ember Inspector
- Defining the model
- Creating nested and dynamic routes
- Loading templates with routes
- Rendering different templates
- Displaying collections
- Working with Ember components
- Building forms
- Creating, editing, and deleting records
- Configuring Ember.js applications
- Testing your Ember application
- Installing add-ins
- Upgrading an Ember application