Now let’s finish the second half of editing. In this scenario a user clicks on the “edit” link and sees fields to edit the lead’s name, phone, and email.
This UI will need to replace the UI that shows the lead, so we’ll have to do some special work to handle that.
As always, add a route first. We will place an
edit route under our existing
lead resource. The
lead resource handles fetching the lead. We shouldn’t repeat that work if we don’t need to.
Make sure to add
, -> after the lead resource.
This route is going to look for a
LeadEdit controller, view, and template.
I’m going to add the template first because it will inform us about what actions we need to handle in the controller.
route is nested inside a
resource, Ember expects the template to be inside a subdirectory with the name of the resource. So this template will be
If you’re not sure where to place a template just look in the Ember Inspector’s “Routes” tab.
You can use a colon
: in Emblem to nest elements on the same line.
Ember gives you the
Ember.TextField view which renders a text input. Just assign
value to the property you want to bind to.
form tag doesn’t actually do anything, it’s just there for markup.
This template has two actions:
cancel. Let’s implement them now.
This part is fairly simple, though you might not be familiar with
save() returns a
Promise object, which we can call
.then on to execute code when the promise is resolved. Basically what this means is that
transitionToRoute won’t be called until the server has confirmed that the model was saved.
We need a way to get to our new route. Add a link inside the
h1 tag in the
lead template. Don’t worry, the stylesheet will make it look pretty.
The first argument,
'edit', is the link text. The second,
'lead.edit', is the route name.
Open the browser and try clicking the edit link. You should see the URL change, but nothing else should happen. Can you figure out why?
Outlets, don’t forget about them. If a template doesn’t appear, always ask yourself: did I add an outlet?! If you’re like me, you’ll forget one at some point and be super annoyed that your template isn’t showing up.
edit route is nested under
lead so Ember is trying to render the template into an
outlet tag inside the
lead template. Since it can’t find it, nothing happens.
Add an outlet to the top of the
Now try it. It should work, but now we have a new problem: the show UI for a lead is still present. That’s because nested routes means nested UI. Since the
lead resource is still active, the UI is still active.
There’s a simple fix to this – we’ll just hide the show UI when we’re editing.
Now we’ll set an
isEditing property on the
lead controller to hide the UI we don’t want to see when it’s true.
unless isEditing to the template and indent all the show UI under it:
Now whenever we visit the edit route we need to set
isEditing to true. We can do that inside the
LeadEdit route. We haven’t made one yet, so do it now:
Now we see those route hooks coming in handy! On
activate we get the
LeadController and set
isEditing to true. On
deactivate we do the opposite. And boom, we’re done.
We could do one last thing for clarity – add
isEditing to the
LeadController and default it to false.
This way future programmers (or our future selves) will know that we have an
isEditing property on this controller and it should be
false by default. We don’t have to do this but I think it’s good style.
Now that we can edit everything about leads I’ll show you how to delete them.