3.7 Templates -- Links
一、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 template的model是一个三张照片的集合,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。
可选择的,你可以传递一个photo的id和一个comment:
app/templates/photo/index.hbs
<p>
{{#link-to 'photo.comment' 5 primaryComment}}
Main Comment for the Next Photo
{{/link-to}}
</p>
- 在上面例子中,PhotoRoute的model hook将会使用params.photo_id=5运行。CommentRoute的model hook不会运行直到你为comment字段提供一个对象。comment的id将会根据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的更多相关文章
- [转]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 ...
- Using FreeMarker templates (FTL)- Tutorial
Lars Vogel, (c) 2012, 2016 vogella GmbHVersion 1.4,06.10.2016 Table of Contents 1. Introduction to F ...
- django模板层(templates)
1.基础部分 通过使用模板,就可以在URL中直接调用HTML,它还是松耦合的,灵活性强,而且更容易维护 而且可以将变量通过一定的方式嵌入到HTML中,最终渲染到页面,总的来说基于模板完成了数据与用户之 ...
- Flask中的MTV架构之Templates
Flask 中的MTV架构之Templates 关注公众号"轻松学编程"了解更多. 1.Templates(模板引擎) 1.1 说明 模板文件就是按照特定规则书写的一个负责展示 ...
- iOS微信里打开app,Universal Links
这两天在弄分享,从第三方应用或者浏览器打开自己app的东西 传统的方式是通过URL Scheme的方式,但是iOS9以后又出了新的更完美的方式Universal Links. 传统的URL Schem ...
- Dancing Links and Exact Cover
1. Exact Cover Problem DLX是用来解决精确覆盖问题行之有效的算法. 在讲解DLX之前,我们先了解一下什么是精确覆盖问题(Exact Cover Problem)? 1.1 Po ...
- 跳跃的舞者,舞蹈链(Dancing Links)算法——求解精确覆盖问题
精确覆盖问题的定义:给定一个由0-1组成的矩阵,是否能找到一个行的集合,使得集合中每一列都恰好包含一个1 例如:如下的矩阵 就包含了这样一个集合(第1.4.5行) 如何利用给定的矩阵求出相应的行的集合 ...
- 解决Windows版Git出现templates not found的问题
环境: Win10 x64 Git windows客户端(下载自 https://git-scm.com/) SourceTree 1.9.6.1(使用系统安装的Git,而非SourceTree内嵌的 ...
- links and softwares
links 普通 http://www.ncpa-classic.com//special/2014gejujie/index.shtml ; 中国大剧院 http://tieba.baidu.com ...
随机推荐
- mybatis由浅入深day02_9.3.5使用生成的代码_9.4逆向工程注意事项
9.3.5 使用生成的代码 需要将生成工程中所生成的代码拷贝到自己的工程中. 拷这4个到我们原来的spring_mybatis1216工程下 ItemsMapper.java package cn.i ...
- POJ 1252 Euro Efficiency(完全背包, 找零问题, 二次DP)
Description On January 1st 2002, The Netherlands, and several other European countries abandoned the ...
- MVC3--View层
Razor二义性: 1,当view层中出现 邮件格式时候比如 anbylau2130@qq.com 这种情况Razor将会出现多义性 可以使用@@来转义为一个@字符, 如:<p>y ...
- swift--Timer实现定时器功能,每个一段时间执行具体函数,可以重复,也可以只执行一次
1,创建 //控制器 timer = Timer.scheduledTimer(timeInterval: 0.001, target: self, selector: #selector(Fifte ...
- ios开发之--使用toolbar调整item之间的间隔
toolbar的item有很多种样式,其实经常使用的就几种, UIBarButtonSystemItemFixedSpace 木棍:可以理解为固定的长度 UIBarButtonSystemItemFl ...
- 管理开机启动:systemd
一.CentOS7 systemd 介绍 在 CentOS7 中,使用 systemd 来管理其他服务是否开机启动,systemctl 是 systemd 服务的命令行工具 [root@localho ...
- m4a文件在iOS上的流媒体播放
Date: 2016-03-23 Title: m4a文件在iOS上的流媒体播放 Tags: m4a, mp4, iOS, Android URL: m4a-streaming-play-on-mob ...
- easyui —— footer
前言: 使用easyui的datagrid,在最后一行加上“总计”字样,效果如下: 过程: ... <table id="dg" title="xx管理" ...
- 一个php日志类
<?php //author:lixiuran class Log { public static function writeLog($string) { $string = date('H: ...
- Python初学总结
下边的总结都是在python3上 一.基础 1.输出与输入: 输出:print(变量/字符串) 输入:input() 返回的是字符串 price=input() print(price) 2.pyth ...