Links Edit Page
The {{link-to}}
Helper
You create a link to a route using the {{link-to}}
helper.
1 2 3 4 5 |
App.Router.map(function() { this.resource("photos", function(){ this.route("edit", { path: "/:photo_id" }); }); }); |
If the model for the photos
template is a list of three photos, the
rendered HTML would look something like this:
1 2 3 4 5 |
<ul> <li><a href="/photos/1">Happy Kittens</a></li> <li><a href="/photos/2">Puppy Running</a></li> <li><a href="/photos/3">Mountain Landscape</a></li> </ul> |
When the rendered link matches the current route, and the same
object instance is passed into the helper, then the link is given
class="active"
.
The {{link-to}}
helper takes:
- The name of a route. In this example, it would be
index
,photos
, orphotos.edit
. - At most one model for each dynamic segment.
By default, Ember.js will replace each segment with the
value of the corresponding object's
id
property. - An optional title which will be bound to the
a
title attribute
If there is no model to pass to the helper, you can provide an explicit identifier value instead.
The value will be filled into the dynamic segment
of the route, and will make sure that the model
hook is triggered.
Example for Multiple Segments
If the route is nested, you can supply a model for each dynamic segment.
1 2 3 4 5 6 7 8 |
App.Router.map(function() { this.resource("photos", function(){ this.resource("photo", { path: "/:photo_id" }, function(){ this.route("comments"); this.route("comment", { path: "/comments/:comment_id" }); }); }); }); |
If you specify only one model, it will represent the innermost dynamic segment :comment_id
.
The :photo_id
segment will use the current photo.
Alternatively, you could pass both a photo and a comment to the helper:
In this case, the models specified will populate both the :photo_id
and :comment_id
.