Create Components
Because a component makes use of a template to define its UI but is itself added to a containing template, the relationship between components and templates can be a bit tricky. It helps me to think of the {{input}} control as an example. It’s a stand-alone control that can be used in a generic Ember template. The components you’ll define work the same way.
Before we can create our component, we need a place for it to live. We’ll create a new route and reference our new component from that route’s template. Because we’re editing a single note at a time, the most sensible place for this route to live is as a child of the notebooks/notes route.
From a command prompt, run the following Ember CLI command:
| | $ ember generate route notebooks/notes/note |
This creates an empty stub for the new note route. We’ll populate this new class in a moment. First, we need to modify the Router implementation and the notes template to be able to navigate to our new route.
When you created the new route, Ember CLI modified the Router class to include this route at the appropriate place in the hierarchy. Because we’re going to query Ember Data for a note record, we’ll need to add a parameter to the route to pass the ID of this note to the child route. Open router.js and update it to look like this:
| | import Ember from 'ember'; |
| | import config from './config/environment'; |
| | |
| | const Router = Ember.Router.extend({ |
| | location: config.locationType, |
| | rootURL: config.rootURL |
| | }); |
| | |
| | Router.map(function() { |
| | this.route('register'); |
| | this.route('login'); |
| | this.route('notebooks', { path:'notebooks/:user_id'}, function() { |
| | this.route('notes', { path:"notes/:notebook_id"}, function() { |
| | this.route('note', { path:'note/:note_id'}, function() {}); |
| | }); |
| | }); |
| | }); |
| | |
| | export default Router; |
You’ll recall that we use the path attribute in our call to this.route to provide data to the route. The route can use the data from the path attribute however it chooses. We’ll want to pass the ID of the current note. Let’s tweak the notes template to provide this ID to the route:
| | <div class="col-md-12"> |
| | Notes |
| | </div> |
| | <div> |
| | <div class="col-md-4"> |
| | <div> |
| | title: {{input value=title}} |
| | <button {{action 'addNote'}}>Add</button> |
| | </div> |
| | <div> |
| | <ul> |
| | {{#each model as |note|}} |
| | <li> |
| | {{#link-to 'notebooks.notes.note' note.id}} |
| | {{note.title}} |
| | {{/link-to}} |
| | <button {{action 'deleteNote' note}}>delete</button> |
| | </li> |
| | {{else}} |
| | <div>No notes found</div> |
| | {{/each}} |
| | </ul> |
| | </div> |
| | </div> |
| | <div class="col-md-8"> |
| | {{outlet}} |
| | </div> |
| | </div> |
This changes the notes page from a static list of titles to a list of clickable links. Adding the note.id value to the {{link-to}} expression causes that value to be added into the URL when navigating to the new route. This lets us load the related note record into the child route.
Within our new route, we want to load the related record using Ember Data, and also provide an action that allows us to close the route without saving. We’ll see shortly how to make use of these additions. The model hook queries for the note record, and the close action navigates away from the current route by transitioning to the notes route.
Here’s our implementation:
| | import Ember from 'ember'; |
| | |
| | export default Ember.Route.extend({ |
| | model: function(params) { |
| | return this.store.findRecord('note',params.note_id); |
| | }, |
| | actions: { |
| | close: function() { |
| | this.transitionTo('notebooks.notes'); |
| | } |
| | } |
| | }); |
We’re now ready to start work on our component.
An Ember component is defined by two files. The first is a Handlebars template, which is used to define the user interface of the component. The second is a JavaScript class that extends Ember.Component. This is used to define any action-handling code that the template needs to perform.
We’ll call this the edit-note component. As in other areas of Ember, the naming convention is important here. A dash in the name of the component is how Ember identifies it as a component. To create the necessary files using Ember CLI, run the following command at the command prompt:
| | $ ember generate component edit-note |
This command creates two new stub files: edit-note.js in the app/components directory, and edit-note.hbs in the app/templates/components directory. The first is meant to hold our component logic, and the second is for our Handlebars template.
We now have a few stub files ready to contain our component. Because we want to use it to display a note record, let’s take a look now at how to provide data to the component.