英文原文： http://emberjs.com/guides/templates/links/

Links (The {{link-to}} Helper)

链接 ({{link-to}}助手)

You create a link to a route using the {{link-to}} helper.

你可以使用如下的方式创建一个指向一个路由的链接：

  1. App.Router.map(function() {
  2.   this.resource("photos", function(){
  3.     this.route("edit", { path: "/:photo_id" });
  4.   });
  5. });
  1. {{! photos.handlebars }}
  3. <ul>
  4. {{#each photo in photos}}
  5.   <li>{{#link-to 'photos.photo' photo}}{{photo.title}}{{/link-to}}</li>
  6. {{/each}}
  7. </ul>

If the model for the photos template is a list of three photos, the rendered HTML would look something like this:

如果photos模板对应的模型拥有三张照片，那么，被渲染的HTML内容将如下所示：

  1. <ul>
  2.   <li><a href="/photos/1">Happy Kittens</a></li>
  3.   <li><a href="/photos/2">Puppy Running</a></li>
  4.   <li><a href="/photos/3">Mountain Landscape</a></li>
  5. </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".

当被渲染的链接与当前路由匹配时，并且传入{{link-to}}助手的是相同的对象实例，那么链接的class被设置为active。

The {{link-to}} helper takes:

  • The name of a route. In this example, it would be index, photos, or photos.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. 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.
  • An optional title which will be bound to the a title attribute

{{link-to}}助手可以接收以下三个参数：

  • 路由名称。在上面例子中，可以是index, photos或者 photos.edit。
  • 每个动态段最多对应一个模型。默认情况下，Ember.js将使用对应对象的id属性来替换动态段。 如果没有模型可以传给助手，也可以用一个ID值来取代。这个值被用来替换路由的动态段，并确保model钩子被触发。
  • 此外，我们也可以提供一个链接名称绑定到a标签的title属性。
  1. {{! photos.handlebars }}
  3. {{#link-to 'photo.edit' 1}}
  4. First Photo Ever
  5. {{/link-to}}

Example for Multiple Segments

多动态段示例

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

如果多个路由是互相嵌套的，那么你可以为每个动态段提供一个模型或模型标识符，如下所示：

  1. App.Router.map(function() {
  2. this.resource("photos", function(){
  3.   this.resource("photo", { path: "/:photo_id" }, function(){
  4.     this.route("comments");
  5.     this.route("comment", { path: "/comments/:comment_id" });
  6.   });
  7. });
  8. });
  1. {{! photoIndex.handlebars }}
  3. <div class="photo">
  4.   {{body}}
  5. </div>
  7. <p>{{#link-to 'photo.comment' primaryComment}}Main Comment{{/link-to}}</p>

If you specify only one model, it will represent the innermost dynamic segment :comment_id. The :photo_id segment will use the current photo.

如果只指定了一个模型，其将用于代表最内层的动态段:comment_id，而:photo_id将使用当前的photo对象。

Alternatively, you could pass both a photo and a comment to the helper:

此外，你还可以同时给{{link-to}}助手指定一张照片和一条评论，如下所示：

  1. <p>
  2.   {{#link-to 'photo.comment' 5 primaryComment}}
  3.     Main Comment for the Next Photo
  4.   {{/link-to}}
  5. </p>

In the above example, the model hook for PhotoRoute will run with params.photo_id = 5. The model hook for CommentRoute won’t run since you supplied a model object for the comment segment. The comment’s id will populate the url according to CommentRoute‘s serialize hook.

在上述示例中，PhotoRoute的模型钩子的参数会包含params.photo_id = 5。CommentRoute的model钩子不会执行，因为传入了一个comment段的模型对象。评论的ID会根据CommentRoute的serialize钩子来填写URL。

Adding additional attributes on a link

给链接添加附加属性

When generating a link you might want to set additional attributes for it. You can do this with additional arguments to the link-to helper:

当生成一个链接时，有时候还需要为其添加附加属性。通过link-to助手的附加参数，可以完成该功能：

  1. <p>
  2.   {{link-to 'Edit this photo' 'photo.edit' photo class="btn btn-primary"}}
  3. </p>

Many of the common HTML properties you would want to use like class, and rel will work. When adding class names, Ember will also apply the standard ember-view and possibly active class names.

大部分HTML属性如class和rel都可以这样来添加。当添加样式类名时，Ember还会添加ember-view和可能的active样式类。