Ember.js 入门指南——{{link-to}} 助手
若是你不是从前面的文章看下来的你可能须要使用Ember CLI构建一个Ember项目，在Ember CLI的官网与很是详细的解释教程，不过若是你只是为了构建一个Ember项目的框架你只须要三步就能够构建。
ember new appNamehtml
cd appNamejava
ember servernode
只须要在你的终端、控制台执行这3条命令便可，不过在使用这些命令以前你须要安装node、npm等插件！！不过若是是安装Ember CLI网站上的步骤安装应该是很容易的！！git
1，link-to助手常规使用
link-to助手表达式渲染以后就是一个a标签。而a标签的href属性的值是根据路由生成的，与路由的设置是息息相关的。而且每一个设置的路由名称都是有着对应的关系的。github
为了演示效果，用命令生成了一个route（或者手动建立文件）并获取测试数据。本文结合路由设置，随便串讲了一些路由方面的知识，若是你能看懂最好了，看不懂也没关系后面会有一整章介绍路由。npm
1， 增长子路由
// app/routers.js
import Ember from 'ember';
import config from './config/environment';
var Router = Ember.Router.extend({
location: config.locationType
});
Router.map(function() {
this.route('posts', function() {
this.route('detail', {path: '/:post_id'}); //指定子路由，:post_id会自动转换为数据的id
});
});
export default Router;
如上述代码，在posts下增长一个子路由detail。而且指定路由名为“/:post_id”，“:post_id”是一个动态字段，通常状况下默认为model的id属性。通过模板渲染以后会获得相似于“posts/1”、“posts/2”这种形式的路由。api
2， 在route初始化数据
// app/routes/posts.js
import Ember from 'ember';
export default Ember.Route.extend({
model: function() {
return Ember.$.getJSON('https://api.github.com/repos/emberjs/ember.js/pulls');
}
});
使用Ember提供的方法直接从远程获取测试数据。测试数据的格式能够用浏览器直接打开上面的URL就能够看到。浏览器
3， 添加显示的模板
<!-- // app/templates/posts.hbs -->
<div>
<div>
<div class="col-md-10 col-xs-10">
<div style="margin-top: 70px;">
<ul>
{{#each model as |item|}}
<li>
<!--设置路由，路由的层级与router.js里定义的要一致 -->
{{#link-to 'posts.detail' item}}
{{item.title}}
{{/link-to}}
</li>
{{/each}}
</ul>
</div>
</div>
</div>
</div>
直接用{{#each}}遍历出全部的数据，并显示在界面上，因为数据比较多可能显示的比较慢，特别是页面刷新以后看到一片空白，请不要急着刷新页面，等待一下便可……。下图是结果的一部分：app
咱们查看页面的源代码，能够看到link-to助手渲染以后的HTML代码，自动生成了URL，在router.js里配置的post_id渲染以后都被model的id属性值代替了。框架
若是你没有测试数据，你还可直接把link-to助手的post_id写死，能够直接把数据的id值设置到link-to助手上。在模板文件的ul标签下一行增长以下代码，在link-to助手中指定id为1：
<!-- 增长一条直接指定id的数据 -->
<li>
{{#link-to 'posts.detail' 1}}增长一条直接指定id的数据{{/link-to}}
</li>
渲染以后的HTML代码为
<li> <a id="ember404" href="/posts/1">增长一条直接指定id的数据 </a> </li>
能够看到与前面使用动态数据渲染以后的href的格式是同样的。若是你想设置某个a标签是激活状态，你能够直接在标签上增长一个CSS类（class=”active”）。
2，link-to助手设置多个动态字段
开发中，路由的路径常常不是2层的（post/1）也有多是多层次的（post/1/comment、post/1/2或者post/1/comment/2等等形式。），若是是这种形式的URL在link-to助手上又要怎么去定义呢？
老样子，在演示模板以前仍是须要先构建好测试数据以及修改对应的路由设置，此时的路由设置是多层的，由于link-to助手渲染以后获得的href属性值就是根据路由生成的！！！这个必需要记得……
1， 一个路由下有个多子路由
// app/routers.js
import Ember from 'ember';
import config from './config/environment';
var Router = Ember.Router.extend({
location: config.locationType
});
Router.map(function() {
// this.route('handlebarsConditionsExpRoute');
// this.route('handlebars-each');
// this.route('store-categories');
// this.route('binding-element-attributes');
// link-to实例理由配置
// this.route('link-to-helper-example', function() {
// this.route('edit', {path: '/:link-to-helper-example_id'});
// });
this.route('posts', function() {
//指定子路由，:post_id会自动转换为数据的id
this.route('detail', {path: '/:post_id'}, function() {
//增长一个comments路由
this.route('comments');
// 第二个子路由comment，而且路由是个动态字段comment_id
this.route('comment', {path: '/:comment_id'});
});
});
});
export default Router;
若是是上述配置，渲染以后获得的路由格式posts/detail/comments。因为获取远程数据比较慢直接注释掉posts.js里的model回调方法，就直接使用写死id的方式。
注意：上述配置中，在路由detail下有2个子路由，一个是comments，一个是comment，而且这个是一个动态段。由此模板渲染以后应该是有2种形式的URL。一种是posts.detail.comments（posts/1/comments），另外一种是posts.detail.comment（posts/1/2）。若是能理解这个那route嵌套层次再多应该也能看明白了！
<!-- // app/templates/posts.hbs -->
<div>
<div>
<div class="col-md-10 col-xs-10">
<div style="margin-top: 70px;">
<ul>
<!-- 增长一条直接指定id的数据 -->
<li>
<!—- 注意此时只有一个动态段，因此只有一个数字1，Ember会根据顺序自动匹配到动态段的位置上。 -->
{{#link-to 'posts.detail.comments' 1}}
posts.detail.comments（posts/1/comments）形式
{{/link-to}}
</li>
<li>
<!—-
注意此时有2个动态段，因此有2个数字1，2，Ember会根据顺序自动匹配到动态段的位置上。
第一个数字1会匹配到第一个动态段post_id上，第二个数字2会匹配到动态段comment_id上
-->
{{#link-to 'posts.detail.comment' 1 2}}
posts.detail.comment（posts/1/2）形式
{{/link-to}}
</li>
</ul>
</div>
</div>
</div>
</div>
渲染以后的html结果以下：
若是是动态段的通常都是model的id代替，若是不是动态段的直接显示配置的路由名称。
2， 多层路由嵌套
上面演示了多个子路由的状况，下面接着介绍一个路由有多个层次，而且是有个多个动态段和非动态段组成的状况。
首先修改路由配置，把comments设置为detail的子路由。而且在comments下在设置一个动态段的子路由comment_id。
// app/routers.js
import Ember from 'ember';
import config from './config/environment';
var Router = Ember.Router.extend({
location: config.locationType
});
Router.map(function() {
this.route('posts', function() {
//指定子路由，:post_id会自动转换为数据的id
this.route('detail', {path: '/:post_id'}, function() {
//增长一个comments路由
this.route('comments', function() {
// 在comments下面再增长一个子路由comment，而且路由是个动态字段comment_id
this.route('comment', {path: '/:comment_id'});
});
});
});
});
export default Router;
模板使用路由的方式posts.detail.comments.comment。正常状况应该生成相似posts/1/comments/2这种格式的URL。
<!-- // app/templates/posts.hbs -->
<div>
<div>
<div class="col-md-10 col-xs-10">
<div style="margin-top: 70px;">
<ul>
<li>
<!--
一共设置了4层路由
-->
{{#link-to 'posts.detail.comments.comment' 1 2}}
posts.detail.comments.comment（posts/1/comments/2）形式
{{/link-to}}
</li>
</ul>
</div>
</div>
</div>
</div>
渲染以后获得的HTML以下：
<ul> <li> <!-- 一共设置了4层路由 --> <a id="ember473" href="/posts/1/comments/2" class="active ember-view"> posts.detail.comments.comment（posts/1/comments/2）形式 </a> </li> </ul>
结果正如咱们预想的组成了4层路由（/posts/1/comment/2）。
补充内容。
对于上述第二点多层路由嵌套的状况你还可使用下面的方式设置路由和模板，而且可用同时设置了/posts/1/comments和/posts/1/comments/2。
this.route('posts', function() {
//指定子路由，:post_id会自动转换为数据的id
this.route('detail', {path: '/:post_id'}, function() {
//增长一个comments路由
this.route('comments');
// 注意区分与前面的设置方式，comment渲染以后直接被comments/:comment_id替换了，会获得如posts/1/comments/2这种形式的URL
this.route('comment', {path: 'comments/:comment_id'});
});
});
<!-- // app/templates/posts.hbs -->
<div>
<div>
<div class="col-md-10 col-xs-10">
<div style="margin-top: 70px;">
<ul>
<li>
<-- 设置的方式不变 -->
{{#link-to 'posts.detail.comments' 1}}
posts.detail.comments（/posts/1/comments）形式
{{/link-to}}
</li>
<li>
<!--
一共设置了4层路由，与前面的设置方式同样
-->
{{#link-to 'posts.detail.comment' 1 2}}
posts.detail.comments.comment（posts/1/comments/2）形式
{{/link-to}}
</li>
</ul>
</div>
</div>
</div>
</div>
渲染以后的HTML结果以下：
两种方式定义的路由渲染的结果是同样的，看我的喜欢了，定义方式也是很是灵活的。第一种定义方式看着比较清晰，看代码就知道是一层层的。可是须要写更多代码。第二种定义方式更加简洁，不过看不出嵌套的层次。
对于上述route的设置若是还不能理解也没关系，后面会有一整章是介绍路由的，然而你能结合link-to助手理解了路由设置对于后面route章节的学习是很是有帮助的。
3， 在link-to助手内增长额外属性
handlebars容许你直接在link-to助手增长额外的属性，通过模板渲染以后a标签就有了增长的额外属性了。
好比你可用为a标签增长CSS的class。
handlebars容许你直接在link-to助手增长额外的属性，通过模板渲染以后a标签就有了增长的额外属性了。
好比你可用为a标签增长CSS的class。
{{link-to "show text info" 'posts.detail' 1 class="btn btn-primary"}}
{{#link-to "posts.detail" 1 class="btn btn-primary"}}show text info{{/link-to}}
上述两种写法都是能够的，渲染的结果也是同样的。渲染以后的HTML为：
<a id="ember434" href="/posts/1" class="btn btn-primary ember-view">show text info</a>
注意：上述两种方式的写法所设置的参数的位置不能调换。可是官网没有看到这方面的说明，有多是个人演示实例的问题，若是读者你的可用欢迎给我留言。
第一种方式，显示的文字必须放在最前面，而且中间的参数是路由设置，最有一个参数是额外的属性设置，若是你还要其余的属性须要设置仍然只能放在最后面。
第二章方式的参数位置也是有要求的，第一个参数必须是路由设置，后面的参数设置额外的属性。
对于渲染以后的HTML代码中出现标签id为ember，或者ember-xxx，这些属性都是Ember默认生成的，咱们能够暂时不用理它。
综合，原本这篇是讲解link-to的，可是因为涉及到了route的配置就顺便讲讲，有点难度，主要在路由的嵌套这个知识点上，可是对于后面的route这一章的学习是颇有帮助的，route的设置几乎都是为URL设置的。这二者是紧密关联的！
- 1. Ember.js 入门指南——目录
- 2. Ember.js 入门指南--目录
- 3. Ember.js 入门指南——表单元素
- 4. Ember.js 入门指南——包裹内容
- 5. Ember.js 入门指南——路由定义
- 6. Ember.js 入门指南——属性传递
- 7. Ember.js 入门指南——总目录
- 8. Ember.js 入门指南——路由简介
- 9. Ember.js 入门指南——查询参数
- 10. Ember.js 入门指南——组件定义
- 更多相关文章...
- • HTML 指南 - 网站建设指南
- • CSS 指南 - 网站建设指南
- • YAML 入门教程
- • Java Agent入门实战（三）-JVM Attach原理与使用
-
每一个你不满意的现在，都有一个你没有努力的曾经。