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原理與使用
-
每一个你不满意的现在，都有一个你没有努力的曾经。