3.7 Templates-Links

One, the {{link-to}} Helper

1. Create a link to the route using {{link-to}}:

App/router.js

Router.map (function() {  thisfunction()}    {this. Route ("edit", {path: "/:p hoto_id" });   });

App/templates/photos.hbs

< ul >   {{#each photos as |photo|}}     < Li > {{#link-to ' photos.edit ' photo}} {{Photo.title}} {{/link-to}} </ Li >   {{/each}}</ul>

If the model of the photos template is a collection of three photos, HTML:

<ul>  <Li><ahref= "/PHOTOS/1">Happy kittens</a></Li>  <Li><ahref= "/PHOTOS/2">Puppy Running</a></Li>  <Li><ahref= "/PHOTOS/3">Mountain Landscape</a></Li></ul>

2. {{link-to}} has one or two parameters:

• The name of the route. In the example, it is index, photos, or photos.edit.
• For most models of dynamic segment Dynamics segment , by default, Ember replaces each segment with the value of the corresponding object's ID attribute. In the example above, the second parameter is each photo object, and theID attribute is used to populate the offset field, whether it is a three-way. If no model is passed to helper, you can provide a definite value instead.
• App/templates/photo.hbs

• {{#link-to ' Photos.photo.edit ' 1}}  First Photo Ever{{/link-to}}

• When the rendered link matches the current route, and the same object instance is passed to helper, then this link adds the class= "active" attribute. For example, if the URL is /photos/2, the first example above will be rendered as:

• <ul>  <Li><ahref= "/PHOTOS/1">Happy kittens</a></Li>  <Li><ahref= "/PHOTOS/2"class= "Active">Puppy Running</a></Li>  <Li><ahref= "/PHOTOS/3">Mountain Landscape</a></Li></ul>　　

Second, Example for multiple segments

If the route is nested, you can provide a model or an identifier for each dynamic field.

App/router.js

Router.map (function() {  thisfunction() {    this  function() {      this. Route ("comments");        this. Route ("comment", {path: "/comments/:comment_id" });   });

App/templates/photo/index.hbs

<class= "Photo">  {{body}}</Div > < P > {{#link-to ' photos.photo.comment ' primarycomment}} Main comment{{/link-to}}</p>

If you specify only one model, it will represent the dynamic segment of the inner layer : comment_id. :p the hoto_id field will use the current photo.

Optionally, you can pass a photo ID and a comment:

App/templates/photo/index.hbs

< P >   {{#link-to ' photo.comment ' 5 primarycomment}}    Main comment for the Next photo  {{/link-to}}  </p>

• In the example above,Photoroute 's model Hook will be run using params.photo_id=5 . commentroute model  hooks do not run until you provide an object for the Commentz field. the comment ID will populate the URL based on the Commentroute serialization Hook method.

Iii. Using link-to as an Inline Helper

In addition to being a block expression,link-to helper can also be used in an inline form by specifying the link text as the first argument of the helper:

A link in {{#link-to ' index '}}block Expression form{{/link-to}},and a link in {{link-to ' Inline Form ' Index '}}.

Output:

<href= '/'>Block Expression Form</a>  < href = '/' > Inline Form </    a>.

Iv. Adding Additional Attributes on A Link

When you build a link, you may want to set the extra properties for it. You can do this with additional parameters:

< P >   {{link-to ' Edit this photo ' photo.edit ' photo class= ' btn btn-primary '}}</p  >

Many common HTML attributes you can use such as class. When you add a class name, Ember also applies the standard Ember-view and possible active class names.

V. Replacing history Entries

When converting between routes, the default form of link-to is to add entries in the history of the browser. However, in the browser history you can replace the current entry with replace=true .

< P >   {{#link-to ' photo.comment ' 5 primarycomment Replace=true}}    Main comment for the Next photo  {{/link-to} }</p>

3.7 Templates-Links