Getting Started with Ember.js Part 3: Showing a Single Car


In the last post, we set up the index view. Let’s set up a route that shows and saves a single car’s details.

Getting Started with Ember.js

View on Github

I’m combining the show and edit view here since they are largely redundant. Using the show view, we’ll need to have a save button that takes the model and calls the server to save the model. We’ll also add a cancel button that returns the user back to the index route.

Add the show route to the router in app/assets/javascripts/router.js. Note the inclusion of the :id parameter. This gives the route URL a parameter like /#/cars/4, where 4 is the primary key for the car.

Add the Ember Data call to the cars route in app/assets/javascripts/routes/CarsRoutes.js. When this route is triggered, Ember Data will make a get request to /cars/:id to get the list of cars to display. It should look like this:

Add the show template in app/assets/javascripts/templates/cars/show.js.hbs. This is using the Foundation grid for formatting. All of the divs for formatting aren’t strictly necessary, but will align all of the fields. The more important bits are the Handlebars helpers like {{input}}.

If you visit localhost:3000/#/cars/1 in the browser, you should see that the route throws a 404 error in the console. This is because we haven’t set up rails to handle the show action yet. So let’s take a break and do that.  Add the typical set_car and car_params methods. Also add a show method that renders json using the serializer. It should look like this now:

You should be able to get the car in JSON form at localhost:3000/cars/1.json now. Refresh the view, and it should be populated with some data.

show-view

Now back at the index view in app/assets/javascripts/templates/cars/index.js.hbs, you can now link to the show view in the grid. Replace one of the properties with a link-to:

Now let’s add a save button. As far as I can tell, it’s idiomatic to put the save action on the route and not the controller like you might expect. So we’ll add a save action to the Cars show route.

Add a save button that submits the form and add an action-on-submit to the form. show.js.hbs should now look like this:

Back in app/assets/javascripts/routes/CarsShowRoute.js add an action object with the Ember Data code that will save the model. Note that you can transition back to index after success, or you could stay on the same page and display some kind of success message.

Now if you try to save you should get another 404 put error since we haven’t added the update part to Rails. Let’s do that now.

Add an update method and add :update to the before filter. The controller should now look like this:

Head back to the form and you should be able to save the update. Check the console for the log messages and check the index page to see if the save worked.

Now that you’ve got the show view working and saving, head on to Part 4: Creating a New Car.


Advertisement

No Comments

Name
A name is required.
Email
An email is required.
Site
Invalid URL

No comments yet