Ember.js(JavaScript框架) v3.27.0 官方版

　　Ember.js是一款非常專業且優秀的JavaScript框架，可使用該框架構建現代Web應用程序，該框架最大的特點就是高效，而且經過了實踐檢驗，非常適合開發人員使用，提供了豐富且強大的功能，便于管理現代Web應用程序，可有效幫助開發團隊提高生產力，也可用于構建在瀏覽器中運行，可以將HTML文件復制到Ember應用程序中的中央模板文件中，并可以通過在終端中運行來提供應用程序服務，從而使得您的應用程序本地副本可在Web瀏覽器中查看，Ember.js也可以與任何類型的后端一起使用，歡迎有需要的用戶下載體驗

軟件功能

　　Ember CLI

　　一個強大的開發工具包，用于創建，開發和構建Ember應用程序。從CLI指南中了解基本命令。

　　組件

　　Ember應用程序中使用的基本結構，用于創建可重用的UI元素并定義應用程序的布局和功能。

　　路由

　　Ember應用程序的核心部分。使開發人員能夠從URL驅動應用程序狀態。

　　服務

　　在應用程序中存儲長期狀態并將其傳遞的方式。

　　Ember數據

　　Ember數據提供了與外部API進行通信和管理應用程序狀態的一致方式

　　Ember Inspector-瀏覽器擴展或書簽，用于實時檢查您的應用程序。這對于在野外發現Ember應用程序，嘗試安裝它并打開NASA網站也很有用！

軟件特色

　　包括電池

　　Ember的開箱即用的經驗，讓您在第一天就開始建立并保持多年的運輸。受益于我們多年的經驗，幫助您的團隊更快地提高工作效率。您再也不需要將您自己的框架連接在一起了。

　　建立管道

　　Ember CLI是現代Ember應用的骨干，提供代碼生成器來創建新的實體，并每次都將必要的文件放在正確的位置。Ember應用程序有一個內置的開發環境，包括快速重建、自動重載和測試運行器。

　　準備好部署了嗎？這也很簡單--只需一個命令就可以為生產建立你的應用程序。

　　路由

　　URL一直是網絡的主要優勢之一，Ember應用也尊重這一點。Ember內置的路由器是一流的解決方案，它將異步數據加載與動態url段和查詢參數相結合。Ember路由器無縫支持嵌套的URL，具有增量數據獲取、嵌套加載和錯誤分詞的功能。

　　數據層

　　雖然您可以為您的應用程序使用任何數據層，但每個新的Ember應用程序都包含一個功能齊全的數據訪問庫，稱為Ember Data。

　　Ember Data允許您一次訪問多個來源的數據，設置異步關系，并在您的應用程序中保持模型的更新。

　　測試

　　享受每個應用程序默認內置的全功能、現代化的測試束。每當Ember應用中生成一個實體，也會為該實體生成測試。Ember應用程序支持三個級別的測試，方便測試從單個組件到驗收測試的所有內容，驗收測試可以啟動你的整個應用程序并與之交互，以驗證一切都在正常工作。

　　測試也可以在瀏覽器中運行，提供額外的安心。

　　性能測試

　　Ember是建立在Glimmer渲染引擎上的，Glimmer渲染引擎是目前市場上最快的渲染技術之一，這要歸功于它將模板編譯成高性能的虛擬機的方式。

　　由于我們的整體性能方法，性能升級通常是免費的，不需要額外的工作!

　　輕松升級

　　Ember遵循6周的發布周期，每6周發布一個新的小版本。由于對穩定性的堅定承諾，小版本之間的升級是直接和快速的。考慮周全的廢棄機制會給你足夠的警告，讓你知道哪些代碼需要在下一個主要版本中進行修改，廢棄的或升級的功能通常會附帶codemod，可以運行這些codemod來自動更新你的代碼庫。

官方教程

　　安裝Ember

　　您可以使用Node.js軟件包管理器npm的單個命令安裝Ember。在您的終端中輸入以下內容：

　　創建一個新的應用程序

　　通過npm安裝Ember CLI后，您將可以ember在終端中訪問新命令。您可以使用該ember new命令來創建新的應用程序。

　　這個命令將創建一個名為的新目錄，ember-quickstart并在其中建立一個新的Ember應用程序。該--lang en選項將應用程序的主要語言設置為英語，以幫助改善可訪問性。開箱即用，您的應用程序將包括：

　　開發服務器。

　　模板編譯。

　　JavaScript和CSS壓縮。

　　通天塔的現代特色。

　　通過以集成的軟件包提供構建生產就緒的Web應用程序所需的一切，Ember使開始新項目變得輕而易舉。

　　讓我們確保一切正常。 cd進入應用程序目錄ember-quickstart并通過鍵入以下命令啟動開發服務器：

　　幾秒鐘后，您應該看到如下所示的輸出：

　　（要隨時停止服務器，請在終端中鍵入Ctrl-C。）

　　http://localhost:4200在您選擇的瀏覽器中打開。您應該看到一個Ember歡迎頁面，而沒有其他內容。

　　恭喜你！您剛剛創建并啟動了第一個Ember應用程序。

　　在模板中編寫一些HTML

　　我們將從編輯application模板開始。用戶加載您的應用程序時，該模板始終顯示在屏幕上。在編輯器中，打開app/templates/application.hbs并將其更改為以下內容：

　　Ember檢測到更改后的文件，并在后臺自動為您重新加載頁面。您應該看到歡迎頁面已被“ PeopleTracker”替換。您還{{outlet}}向此頁面添加了，這意味著所有路由都將在該位置呈現。

　　定義路線

　　讓我們構建一個顯示科學家列表的應用程序。為此，第一步是創建一條路線。現在，您可以將路由視為組成您的應用程序的不同頁面。

　　Ember帶有生成器，用于自動執行常見任務的樣板代碼。要生成路線，請在ember-quickstart目錄的新終端窗口中鍵入以下內容：

　　您將看到如下輸出：

　　那是Ember告訴您它已經創建了：

　　用戶訪問時要顯示的模板/scientists。

　　一個Route是獲取由模板中使用的模型對象。

　　應用程序路由器中的一項（位于中app/router.js）。

　　此路線的單元測試。

　　在中打開新創建的模板，app/templates/scientists.hbs然后添加以下HTML：

　　在瀏覽器中，打開http://localhost:4200/scientists。你應該看到

　　我們把在scientists.hbs模板正下方的

　　從我們的application.hbs模板。

　　由于科學家路線嵌套在應用程序路線下，因此Ember會將其內容呈現在應用程序路線模板的{{outlet}}指令中。

　　現在我們已經有了scientists模板渲染，讓我們給它一些數據進行渲染。為此，我們可以為該路線指定一個模型，也可以通過編輯來指定一個模型app/routes/scientists.js。

　　我們將使用生成器為我們創建的代碼，并向中添加一個model()方法Route：

　　此代碼示例使用JavaScript的稱為類的功能。了解有關最新JavaScript功能的概述，以了解更多信息。

　　在路線的model()方法中，您返回要提供給模板的所有數據。如果您需要異步獲取數據，則該model()方法支持使用JavaScript Promises的任何庫。

　　現在，讓我們告訴Ember如何將字符串數組轉換為HTML。打開scientists模板并添加以下代碼以遍歷數組并打印：

　　在這里，我們使用each 幫助程序來循環從model()掛鉤提供的數組中的每個項目。對于數組中的每個項目（本例中的每個科學家），Ember都會渲染一次包含在幫助器中的塊{{#each}}...{{/each}}。當前正被呈現的項目（科學家）將在被提供scientist可變的，并標示為 as |scientist|在each幫手。

　　最終結果是，無序列表

　　中的數組中將有一個元素對應于每個科學家

　　創建一個UI組件

　　隨著應用程序的增長，您會注意到您正在多個頁面之間共享UI元素，或者在同一頁面上多次使用它們。使用Ember可以輕松地將模板重構為可重用的組件。

　　讓我們創建一個可在多個地方使用的組件，以顯示人員列表。

　　像往常一樣，有一個發電機使我們很容易做到這一點。通過鍵入以下內容來制作新組件：

　　將scientists模板復制并粘貼到組件的模板中，然后對其進行編輯，如下所示：

　　請注意，我們已將標題從硬編碼字符串（“科學家名單”）更改為{{@title}}。該@表明@title的是，將被傳遞到組件，這使得它更容易重復使用相同的組件中，我們正在構建的應用程序的其他部分的參數。

　　我們還重命名scientist為更通用的person，從而減少了組件與使用位置之間的耦合。

　　根據文件系統上的名稱，我們的組件稱為。請注意，字母P和L大寫。