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

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

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

  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.edit' photo}}{{photo.title}}{{/link-to}}</li>
  6. {{/each}}
  7. </ul>

如果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>

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

{{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}}

多动态段示例

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

  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>

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

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

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

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

给链接添加附加属性

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

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

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