一、The {{link-to}} Helper

1. 使用{{link-to}}创建一个指向route的链接:

app/router.js

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

app/templates/photos.hbs

<ul>
{{#each photos as |photo|}}
<li>{{#link-to 'photos.edit' photo}}{{photo.title}}{{/link-to}}</li>
{{/each}}
</ul>

如果photos templatemodel是一个三张照片的集合,HTML:

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

2. {{link-to}}有一个或者两个参数:

  • 路由的名字。在例子中,就是index, photos或者photos.edit
  • 动态段dynamic segment的大多数模型,默认的,Ember将会使用相应对象的id属性的值替换每个段。在上面的例子中,第二个参数就是每个photo对象,id属性被用来填充对应字段,无论是1,2,3。如果没有model被传递给helper,你可以提供明确的值来代替。
  • app/templates/photo.hbs
  • {{#link-to 'photos.photo.edit' 1}}
    First Photo Ever
    {{/link-to}}
  • 当被渲染的链接匹配当前路由,并且同一个对象实例被传递到helper,然后这个link会添加class="active"属性。例如,如果URL是/photos/2,上面第一个例子会被渲染为:
  • <ul>
    <li><a href="/photos/1">Happy Kittens</a></li>
    <li><a href="/photos/2" class="active">Puppy Running</a></li>
    <li><a href="/photos/3">Mountain Landscape</a></li>
    </ul>  

二、Example for Multiple Segments

如果路由是嵌套的,你可以为每一个动态字段提供一个模型或者一个标识符。

app/router.js

Router.map(function() {
this.route("photos", function(){
this.route("photo", { path: "/:photo_id" }, function(){
this.route("comments");
this.route("comment", { path: "/comments/:comment_id" });
});
});
});

app/templates/photo/index.hbs

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

如果你仅仅指定一个模型,它将代表最内层的动态段:comment_id:photo_id字段会使用当前的photo。

可选择的,你可以传递一个photoid和一个comment

app/templates/photo/index.hbs

<p>
{{#link-to 'photo.comment' 5 primaryComment}}
Main Comment for the Next Photo
{{/link-to}}
</p>
  • 在上面例子中,PhotoRoutemodel hook将会使用params.photo_id=5运行。CommentRoutemodel hook不会运行直到你为comment字段提供一个对象。commentid将会根据CommentRoute的 序列化钩子方法填充URL。

三、Using link-to as An Inline Helper

除了作为一个块表达式之外,通过指定链接文本作为helper的第一个参数,link-to helper也可以在inline form中被使用:

A link in {{#link-to 'index'}}Block Expression Form{{/link-to}},
and a link in {{link-to 'Inline Form' 'index'}}.

输出:

A link in <a href='/'>Block Expression Form</a>,
and a link in <a href='/'>Inline Form</a>.

四、Adding Additional Attributes on A Link

当生成一个链接时你可能希望设置为它额外的属性。你可以使用额外的参数这样做:

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

许多通用的HTML属性你都可以使用例如class。当添加类名时,Ember还将应用标准的ember-view和可能的active类名。

五、Replacing History Entries

当在路由之间跳转时,link-to默认的形式是在浏览器的历史中增加条目。然而,在浏览器历史记录中你可以使用replace=true替换当前条目。

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

3.7 Templates -- Links的更多相关文章

  1. [转]Format a ui-grid grid column as currency

    本文转自:https://stackoverflow.com/questions/27747184/format-a-ui-grid-grid-column-as-currency-rc-3-0 Yo ...

  2. Using FreeMarker templates (FTL)- Tutorial

    Lars Vogel, (c) 2012, 2016 vogella GmbHVersion 1.4,06.10.2016 Table of Contents 1. Introduction to F ...

  3. django模板层(templates)

    1.基础部分 通过使用模板,就可以在URL中直接调用HTML,它还是松耦合的,灵活性强,而且更容易维护 而且可以将变量通过一定的方式嵌入到HTML中,最终渲染到页面,总的来说基于模板完成了数据与用户之 ...

  4. Flask中的MTV架构之Templates

    Flask 中的MTV架构之Templates 关注公众号"轻松学编程"了解更多. 1.Templates(模板引擎) 1.1 说明 ​ 模板文件就是按照特定规则书写的一个负责展示 ...

  5. iOS微信里打开app,Universal Links

    这两天在弄分享,从第三方应用或者浏览器打开自己app的东西 传统的方式是通过URL Scheme的方式,但是iOS9以后又出了新的更完美的方式Universal Links. 传统的URL Schem ...

  6. Dancing Links and Exact Cover

    1. Exact Cover Problem DLX是用来解决精确覆盖问题行之有效的算法. 在讲解DLX之前,我们先了解一下什么是精确覆盖问题(Exact Cover Problem)? 1.1 Po ...

  7. 跳跃的舞者,舞蹈链(Dancing Links)算法——求解精确覆盖问题

    精确覆盖问题的定义:给定一个由0-1组成的矩阵,是否能找到一个行的集合,使得集合中每一列都恰好包含一个1 例如:如下的矩阵 就包含了这样一个集合(第1.4.5行) 如何利用给定的矩阵求出相应的行的集合 ...

  8. 解决Windows版Git出现templates not found的问题

    环境: Win10 x64 Git windows客户端(下载自 https://git-scm.com/) SourceTree 1.9.6.1(使用系统安装的Git,而非SourceTree内嵌的 ...

  9. links and softwares

    links 普通 http://www.ncpa-classic.com//special/2014gejujie/index.shtml ; 中国大剧院 http://tieba.baidu.com ...

随机推荐

  1. 延迟是AR/VR体验的基础

    原文: http://blogs.valvesoftware.com/abrash/latency-the-sine-qua-non-of-ar-and-vr/ 译者注: 原文发表于2012年, 尽管 ...

  2. swift--触摸(UITouch)事件(点击,移动,抬起)

    触摸事件: UITouch:一个手机第一次点击屏幕,会形成一个UITouch对象,知道离开销毁.表示触碰.UITouch对象能表明当前手指触碰的屏幕位置.状态,状态分为开始触碰.移动.离开. 具体方法 ...

  3. Windows下Nutch的配置

    Nutch是一个开源的.Java实现的搜索引擎.它提供了我们运行自己的搜索引擎所需的全部工具. Nutch可以分为2个部分: 抓取部分crawler 抓取程序抓取页面并把抓取回来的数据做成反向索引 搜 ...

  4. UITableView划动删除的实现

    对于app应用来说,使用列表的形式展现数据非UITableView莫属.在熟练掌握了用UITableView展示数据以后,是不是也遇到了需要删除数据的需求?是不是觉得在一行数据上划动一下,然后出现一个 ...

  5. java基础---->多线程之Runnable(一)

    java线程的创建有两种方式,这里我们通过简单的实例来学习一下.一切都明明白白,但我们仍匆匆错过,因为你相信命运,因为我怀疑生活. java中多线程的创建 一.通过继承Thread类来创建多线程 pu ...

  6. JS-两周内自动登录功能

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  7. apply的调用 http://bbs.51js.com/thread-82017-1-3.html

    applay 这个是函数Function的方法为什么Array 也能调用这个函数?比如     function a (){           var kk = [];           kk = ...

  8. DCloud开发资源链接

    jQuery链接: <script src='http://libs.baidu.com/jquery/1.8.3/jquery.min.js'></script> HTML5 ...

  9. [Gradle] 获取 gradle 命令行参数

    project.gradle.startParameter 参考 StartParameter | Gradle API 4.9

  10. MAC OS中Eclipse无法导入(import)工程怎么办?

    我用的MAC OS是10.8.4,Eclipse版本是 Eclipse IDE for Java Developers Version: Juno Service Release 2 Build id ...