链接 编辑页面

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

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

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样式类。