发布于 2015-08-18 16:37:12 | 305 次阅读 | 评论: 0 | 来源: 网络整理
{{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。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样式类。