Ember.js 入門指南——總目錄

    Ember.js 是什麼？我想對於想學習它的人應該知道它是個什麼東西，若是你想了解那就趕忙去 Google 或者百度，本系列教程是經過學習官網教程而後摘抄我的以爲比較重要的部分，加上學習實例整合而成，若有疏漏歡迎提出修改意見，一塊兒成長！

    Ember官網：http://emberjs.com/

    教程官網：http://guides.emberjs.com/v2.0.0/

    在此簡單介紹下 Ember；

    Ember是一個雄心勃勃的Web應用程序，消除了樣板，並提供了一個標準的應用程序架構的JavaScript框架。

    Ember核心組成有以下幾個部分：

路由

在Ember應用程序中，程序的狀態是又URL表示出來的。每個URL都有一個對應的路由對象，這個對象能夠控制是否對用戶可見。

模型

每個路由都有一個與此關聯的模型，模型中包含應用程序當前狀態相關的數據。對於應用程序來講，能夠經過使用jQuery從服務器加載JSON對象，並將這些JSON對象做爲模型，不少的應用程序都是使用模型庫來處理數據，好比Ember data。

模板

模板是用於構建一個應用程序的HTML以及做爲模板語言。(HTMLBars是Handlebars的另外一個版本，用於構建DOM元素而不是構建成一個字符串。)

組件

一個組件就是一個自定義的HTML標籤。標籤的行爲是用JavaScript實現，用HTMLBars模板展現，組件包含了他們使用的數據。它們能夠嵌套，而且能夠經過事件（events）與父組件通訊。其餘的組件庫也是能夠在Ember應用程序中使用，好比Polymer

服務

服務是個單例對象，用於長期保持數據，好比用戶的session。

 

本教程的目錄

    

第一章 對象模型

1，Ember.js 入門指南——類的定義、初始化、繼承

1，http://ibeginner.sinaapp.com/index.php?m=Home&c=Index&a=detail&id=5949f01414a66860379f073cfd8aec43。

2，http://my.oschina.net/ubuntuvim/blog/502006。

 

2，Ember.js 入門指南——類的擴展（reopen）

1，http://ibeginner.sinaapp.com/index.php?m=Home&c=Index&a=detail&id=6e0cdc293cb3be9ebb9bec55f30f578e。

2，http://my.oschina.net/ubuntuvim/blog/502325。

 

3，Ember.js 入門指南——計算屬性（compute properties）

1，http://ibeginner.sinaapp.com/index.php?m=Home&c=Index&a=detail&id=99fdb00c49afb32174c4f189c60382d6。

2，http://my.oschina.net/ubuntuvim/blog/502636。

 

4，Ember.js 入門指南——觀察者（observer）

1，http://ibeginner.sinaapp.com/index.php?m=Home&c=Index&a=detail&id=f36eea7ce11098a6d972a6a6d8cf4876。

2，http://my.oschina.net/ubuntuvim/blog/503512。

 

5，Ember.js 入門指南——綁定（bingding）

1，http://ibeginner.sinaapp.com/index.php?m=Home&c=Index&a=detail&id=ad650778e5a2fbac63d4a484bd472241。

2，http://my.oschina.net/ubuntuvim/blog/503610。

 

6，Ember.js 入門指南——枚舉（enumerables）

1，http://ibeginner.sinaapp.com/index.php?m=Home&c=Index&a=detail&id=e2ea5494bf3d121f25a825c40325c541。

2，http://my.oschina.net/ubuntuvim/blog/504127。

 

 

第二章 模板

7，Ember.js 入門指南——handlebars基礎

1，http://ibeginner.sinaapp.com/index.php?m=Home&c=Index&a=detail&id=b8bd405eca77b612f5b5b974b5f1dfd2。

2，http://my.oschina.net/ubuntuvim/blog/505197。

 

8，Ember.js 入門指南——handlebars條件表達式

1，http://ibeginner.sinaapp.com/index.php?m=Home&c=Index&a=detail&id=851f7d9b1689d8b9cc00a37fbff2ee35。

2，http://my.oschina.net/ubuntuvim/blog/505538。

 

9，Ember.js 入門指南——handlebars遍歷標籤

1，http://ibeginner.sinaapp.com/index.php?m=Home&c=Index&a=detail&id=aba77c385cc3af221c5e2105a7935d5b。

2，http://my.oschina.net/ubuntuvim/blog/506534。

 

10，Ember.js 入門指南——handlebars顯示對象的鍵(未完待續)

1，http://ibeginner.sinaapp.com/index.php?m=Home&c=Index&a=detail&id=9aeea14796094cd250cc72f66ea43680。

2，http://my.oschina.net/ubuntuvim/blog/506536。

 

11，Ember.js 入門指南——handlebars屬性綁定

1，http://ibeginner.sinaapp.com/index.php?m=Home&c=Index&a=detail&id=bd74d8b61c02c9dbf081e7bf2ed18883。

2，http://my.oschina.net/ubuntuvim/blog/507065。

 

12，Ember.js 入門指南——{{link-to}} 助手

1，http://ibeginner.sinaapp.com/index.php?m=Home&c=Index&a=detail&id=95c466a6cb2e21cf9eb7363244ef8756。

2，http://my.oschina.net/ubuntuvim/blog/508320。

 

13，Ember.js 入門指南——番外篇，路由、模板的執行、渲染順序

1，http://ibeginner.sinaapp.com/index.php?m=Home&c=Index&a=detail&id=bd74d8b61c02c9dbf081e7bf2ed18883。

2，http://my.oschina.net/ubuntuvim/blog/508165。

 

14，Ember.js 入門指南——{{action}} 助手

1，http://ibeginner.sinaapp.com/index.php?m=Home&c=Index&a=detail&id=61d90a090c764ccf0e2efdcfe1db295f。

2，http://my.oschina.net/ubuntuvim/blog/508645。

 

15，Ember.js 入門指南——表單元素

1，http://ibeginner.sinaapp.com/index.php?m=Home&c=Index&a=detail&id=d3a384da132083b5b982b2248258e848。

2，http://my.oschina.net/ubuntuvim/blog/508952。

 

16，Ember.js 入門指南——調試助手

1，http://ibeginner.sinaapp.com/index.php?m=Home&c=Index&a=detail&id=3510f7b0d92a0e2f3ad1f742fd0e54ef。

2，http://my.oschina.net/ubuntuvim/blog/509005。

 

17，Ember.js 入門指南——工具類的助手

1，http://ibeginner.sinaapp.com/index.php?m=Home&c=Index&a=detail&id=a3940aaeb28ccc56cb194e1cba00a96d。

2，http://my.oschina.net/ubuntuvim/blog/509426、

 

第三章 路由

18，Ember.js 入門指南——路由簡介

1，http://ibeginner.sinaapp.com/index.php?m=Home&c=Index&a=detail&id=75c4a83c19052fe483b75302d65058ae。

2，http://my.oschina.net/ubuntuvim/blog/509829。

 

19，Ember.js 入門指南——路由定義

1，http://ibeginner.sinaapp.com/index.php?m=Home&c=Index&a=detail&id=74a1f772b4ee90db3c21f119fb67119b。

2，http://my.oschina.net/ubuntuvim/blog/510622。

 

20，Ember.js 入門指南——指定與路由關聯的模型

1，http://ibeginner.sinaapp.com/index.php?m=Home&c=Index&a=detail&id=1cdbc221cd1ef396e37f5811a30d4a54。

2，http://my.oschina.net/ubuntuvim/blog/510934、

 

21，Ember.js 入門指南——模板渲染

1，http://ibeginner.sinaapp.com/index.php?m=Home&c=Index&a=detail&id=d9e28752aab6a69fcb44af4db8ca52af。

2，http://my.oschina.net/ubuntuvim/blog/511047、。

 

22，Ember.js 入門指南——路由重定向

1，http://ibeginner.sinaapp.com/index.php?m=Home&c=Index&a=detail&id=eb8584d8b91b8edfe700f48c45aac631。

2，http://my.oschina.net/ubuntuvim/blog/511484。

 

23，Ember.js 入門指南——路由切換的防止和重試

1，http://ibeginner.sinaapp.com/index.php?m=Home&c=Index&a=detail&id=28b2f5fbadfac2f0bf3fb9c690eee31c。

2，http://my.oschina.net/ubuntuvim/blog/511599。

 

24，Ember.js 入門指南——loading、error子路由

1，http://ibeginner.sinaapp.com/index.php?m=Home&c=Index&a=detail&id=f1918aa603ca6b220835f53ecf9f6800。

2，http://my.oschina.net/ubuntuvim/blog/511757。

 

25，Ember.js 入門指南——查詢參數

1，http://ibeginner.sinaapp.com/index.php?m=Home&c=Index&a=detail&id=bf90dd58ffeed7448d86653f88498b5c。

2，http://my.oschina.net/ubuntuvim/blog/512679。

 

26，Ember.js 入門指南——異步路由

1，http://ibeginner.sinaapp.com/index.php?m=Home&c=Index&a=detail&id=b85e94bc505b200a03b4242d45e9fbff。

2，http://my.oschina.net/ubuntuvim/blog/513043。

 

 

第四章 組件

27，Ember.js 入門指南——組件定義

1，http://ibeginner.sinaapp.com/index.php?m=Home&c=Index&a=detail&id=4fd3ad852fa5d701c2b281bdfbe6bfd1。

2，http://my.oschina.net/ubuntuvim/blog/514534。

 

28，Ember.js 入門指南——屬性傳遞

1，http://ibeginner.sinaapp.com/index.php?m=Home&c=Index&a=detail&id=5def037fa1fc9fc514738cf235a53b47。

2，http://my.oschina.net/ubuntuvim/blog/515011、

 

29，Ember.js 入門指南——包裹內容

1，http://ibeginner.sinaapp.com/index.php?m=Home&c=Index&a=detail&id=bee9f1514bd469c5a7ca63618d8d03d2。

2，http://my.oschina.net/ubuntuvim/blog/515448。

 

30，Ember.js 入門指南——自定義包裹組件的HTML標籤

1，http://ibeginner.sinaapp.com/index.php?m=Home&c=Index&a=detail&id=78089f274a021b0683fa6774e4a886b3。

2，http://my.oschina.net/ubuntuvim/blog/515658。

 

31，Ember.js 入門指南——處理事件

1，http://ibeginner.sinaapp.com/index.php?m=Home&c=Index&a=detail&id=7786cd9fe2d3a4fbefd9ce30e0798845。

2，http://my.oschina.net/ubuntuvim/blog/516086。

 

32，Ember.js 入門指南——action觸發變化

1，http://ibeginner.sinaapp.com/index.php?m=Home&c=Index&a=detail&id=7fd118a9fe67bde8a6dd40f95234b1be。

2，http://my.oschina.net/ubuntuvim/blog/516859。

 

 

第五章 控制器

33，Ember.js 入門指南——控制器（controller）

1，http://ibeginner.sinaapp.com/index.php?m=Home&c=Index&a=detail&id=6cfa443a5bdf4ddbe3e66e92a62d6436。

2，http://my.oschina.net/ubuntuvim/blog/517331。

 

34，Ember.js 入門指南——管理控制器之間的依賴關係

1，http://ibeginner.sinaapp.com/index.php?m=Home&c=Index&a=detail&id=305c76d160da5a32352488550a441d2f。

2，http://my.oschina.net/ubuntuvim/blog/517829。

 

第六章 模型

35，Ember.js 入門指南——model簡介

上篇

1，http://ibeginner.sinaapp.com/index.php?m=Home&c=Index&a=detail&id=042c3049a98afadda356e371434e6329。

2，http://my.oschina.net/ubuntuvim/blog/518193、

下篇

1，http://ibeginner.sinaapp.com/index.php?m=Home&c=Index&a=detail&id=f42446032f26b375c2628888e232fe53。

2，http://my.oschina.net/ubuntuvim/blog/518194。

 

36，Ember.js 入門指南——定義模型

1，http://ibeginner.sinaapp.com/index.php?m=Home&c=Index&a=detail&id=6dc973197228dccc2642f2a28993ba86。

2，http://my.oschina.net/ubuntuvim/blog/518608。

 

37，Ember.js 入門指南——查詢記錄

1，http://ibeginner.sinaapp.com/index.php?m=Home&c=Index&a=detail&id=d27d04573df702a39b1f7ea4afc96501。

2，http://my.oschina.net/ubuntuvim/blog/519119。

 

38，Ember.js 入門指南——新建、更新、刪除記錄

1，http://ibeginner.sinaapp.com/index.php?m=Home&c=Index&a=detail&id=f2cf00bd530a9fe7b9882520bd9667fd。

2，http://my.oschina.net/ubuntuvim/blog/519619。

 

39，Ember.js 入門指南——設置記錄到Store

1，http://ibeginner.sinaapp.com/index.php?m=Home&c=Index&a=detail&id=047b303bdd1b81acd51b88fd80e422ee，

2，http://my.oschina.net/ubuntuvim/blog/520149。

 

40，Ember.js 入門指南——model的關聯關係處理

1，http://ibeginner.sinaapp.com/index.php?m=Home&c=Index&a=detail&id=047b303bdd1b81acd51b88fd80e422ee。

2，http://my.oschina.net/ubuntuvim/blog/520149。

 

41，Ember.js 入門指南——元數據

1，http://ibeginner.sinaapp.com/index.php?m=Home&c=Index&a=detail&id=9b325bd325c83942d5393d64a6963a7d、

2，http://my.oschina.net/ubuntuvim/blog/520164。

 

42，Ember.js 入門指南——自定義適配器

1，http://ibeginner.sinaapp.com/index.php?m=Home&c=Index&a=detail&id=09213c85205d4be507cf2d06a9f8b470。

2，http://my.oschina.net/ubuntuvim/blog/520965。

 

43，Ember.js 入門指南——自定義序列號器

1，http://ibeginner.sinaapp.com/index.php?m=Home&c=Index&a=detail&id=0b2f62a75cdc3352bb5122a36994dced。

2，http://my.oschina.net/ubuntuvim/blog/521685。

 

 

第七章 擴展

44，使用ember-simple-auth實現Ember.js應用的權限控制

http://120.24.90.140:2368/ember-application-authority-control/

 

45，nodejs鏈接MySQL，作簡單的CRUD

http://120.24.90.140:2368/nodejs-dowith-database/

 

46，Ember.js 表單驗證

【轉載，若有侵權，歡迎指出後刪除】

https://www.zfanw.com/blog/ember-js-validate-form-input.html

 

 

 

參考文獻：

1，http://www.cnblogs.com/rush/archive/2013/04/29/3051191.html

2，http://ember-doc.com

3，https://blog.openshift.com/day-19-ember-the-missing-emberjs-tutorial

4，http://eviltrout.com/2013/02/10/why-discourse-uses-emberjs.html

5，http://www.ember-cli.com/user-guide/