Question

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

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

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

1 2 3 4 5

App.Router.map(function() { this.resource("photos", function(){ this.route("edit", { path: "/:photo_id" }); }); });

1 2 3 4 5 6 7

{{! photos.handlebars }} <ul> {{#each photo in photos}} <li>{{#link-to 'photos.edit' photo}}{{photo.title}}{{/link-to}}</li> {{/each}} </ul>

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

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>

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

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

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

1 2 3 4 5

{{! photos.handlebars }} {{#link-to 'photo.edit' 1}} First Photo Ever {{/link-to}}

多动态段示例

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

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" }); }); }); });

1 2 3 4 5 6 7

{{! photoIndex.handlebars }} <div class="photo"> {{body}} </div> <p>{{#link-to 'photo.comment' primaryComment}}Main Comment{{/link-to}}</p>

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

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

1 2 3 4 5

<p> {{#link-to 'photo.comment' nextPhoto primaryComment}} Main Comment for the Next Photo {{/link-to}} </p>

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

给链接添加附加属性

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

1 2 3

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

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