灰燼和Ember CLI入門-js教程-PHP中文網

Ember CLI是一個為Ember構建的命令行工具，它結合了生成器、壓縮器、CSS預處理器編譯器、自動重載和ES6模塊加載器等多種功能。它可以作為Grunt和Gulp等工具的替代方案，用於設置新的Ember項目。
Ember遵循約定優於配置的理念，這意味著它具有許多默認設置，可以簡化開發過程。關鍵元素包括路由、控制器、模板、組件和Ember-Data。
本教程提供了一個分步指南，介紹如何使用Ember CLI構建簡單的聯繫人管理器應用程序。它涵蓋了創建新的Ember項目、設置固定數據、生成用戶模型和路由、創建用戶模板以及添加顯示和編輯用戶信息的功能。
Ember是一個功能強大的JavaScript框架，適用於構建大型Web應用程序。借助Ember CLI，它提供了一個標準化的開發環境，可以更輕鬆地管理依賴項、自動化任務和執行最佳實踐。

Ember多年來經歷了許多變化。其中最大的一次變化是引入了Ember CLI，這是一個為Ember構建的命令行工具。它結合了生成器、壓縮器、CSS預處理器編譯器、自動重載和ES6模塊加載器等多種功能。此命令行工具將幫助您減少在設置Grunt和Gulp等工具上花費的時間。可以說，對於任何全新的Ember項目，它都是這些工具的良好替代方案。在本文中，您將學習如何使用Ember CLI構建簡單的聯繫人管理器應用程序。本教程與我在SitePoint上發布的其他關於Ember的文章略有不同，因為它們沒有附帶Ember CLI。但是，大多數這些概念仍然適用，因此我建議您查看它們並繼續學習。本文的完整代碼可在GitHub上找到。

如何安裝Ember CLI

要安裝Ember CLI，您需要先安裝幾個依賴項。第一個是Node.js。您至少需要0.12.x版本。接下來，需要安裝Bower，可以通過運行以下命令來完成：

npm install -g bower

登入後複製

然後，要安裝Ember CLI，請運行以下命令：

npm install -g ember-cli

登入後複製

如何創建一個新的Ember項目

在開始進行精彩的操作之前，您需要打開終端並按順序執行以下命令，以便創建一個名為contactmanager的新項目文件夾：

ember new contactmanager

登入後複製

第二步，進入目錄，然後使用以下命令安裝所有npm和Bower依賴項：

cd contactmanager
npm install
bower install

登入後複製

此時，通過執行以下命令啟動內置的Ember服務器：

ember serve

登入後複製

您現在可以在URL localhost:4200訪問您的新應用程序。這是在本地計算機上運行的Ember應用程序的默認端口，但您可以根據需要更改它。如果您按照所有指示的步驟操作，現在應該在瀏覽器中看到一個標題，上面寫著“歡迎使用Ember”。

Ember約定和結構

在深入構建應用程序之前，讓我們回顧一下一些Ember約定。

路由器和路由

路由是Ember應用程序的入口點。路由在app/router.js文件中使用Router定義。它們允許您訪問應用程序的不同部分。例如，如果您決定需要在應用程序中管理用戶，則必須定義用戶路由。您可以使用以下語法執行此操作：

npm install -g bower

登入後複製

這將為我們創建以下URL：

/users/
/users/index/
/users/loading/

按照慣例，當您定義路由時，Ember期望找到其他關聯類型，例如路由、控制器和模板。我們可以決定顯式創建這些類型，或者允許Ember為我們創建它們。在許多應用程序中，您很可能必須自己創建它們，但這取決於您。請記住，區分路由器和路由至關重要。我們上面創建的URL結構是使用路由器完成的。這些僅顯示我們希望在應用程序中使用這些URL的意圖。我們還沒有創建實際的路由，而只是這些路由的URL。要創建路由，我們必須在routes文件夾中遵循此過程。如果您感到困惑，請不要擔心，因為我將在本文後面更深入地探討此主題。

控制器

控制器是一種用於存儲視圖狀態的類型，位於app/controllers文件夾中。它們與路由協同工作。在這種情況下，上面的URL對應於/user/，並且需要一個名為/users/的控制器。同樣在這裡，我們可以自由選擇是否自己定義它。控制器還定義視圖操作（如點擊、懸停等）的事件處理程序。

模板

模板是Ember的表示部分。您使用名為Handlebars的模板語言編寫它，該語言編譯成純HTML。模板位於app/templates文件夾中。

組件

組件是小的自包含的功能塊。您可以將它們視為表示和功能的組合，它們可重用且易於維護。

Ember-Data

這是一個由Ember核心團隊維護的庫，它補充了Ember核心，並充當管理數據模型的前端ORM。還有其他一些我以前沒有使用過的替代方案，並且不在本文的討論範圍之內，因為我們將使用Ember-data。

應用程序

我們將構建的聯繫人管理應用程序將包括一個用戶列表及其可用的聯繫信息。該應用程序將允許我們創建、編輯、刪除和查看用戶。為了使我們的應用程序簡潔明了，我們將使用Ember CLI附帶的固定適配器。這充當後端，除了數據不會在頁面刷新時持久化之外。首先，如果您尚未創建，請使用ember new contactmanager創建一個新的Ember項目。

生成用戶模型

移至項目文件夾並使用以下命令生成用戶模型：

npm install -g ember-cli

登入後複製

這將在app/models中創建一個名為user.js的文件，其內容如下：

npm install -g bower

登入後複製

進行必要的更改，以使導出語句如下所示：

npm install -g ember-cli

登入後複製

這定義了我們的用戶模型將具有的屬性。

生成用戶路由

現在，將以下幾行添加到您的router.js文件中，以便為我們提供一些可用的URL：

ember new contactmanager

登入後複製

我們有三個新的URL。其中一個是列出用戶，另一個是查看單個用戶，最後一個是編輯用戶信息。接下來，讓我們使用以下命令創建一個用戶路由：

cd contactmanager
npm install
bower install

登入後複製

此路由將用於檢索我們的用戶列表。使用以下代碼段更改其內容：

ember serve

登入後複製

設置固定數據並生成用戶模板

此時，讓我們向我們的應用程序添加一些臨時數據。為此，運行以下命令：

Router.map(function() {
  this.resource('users', function() {});
});

登入後複製

這會在app/adapters/文件夾中生成一個名為application.js的文件。默認情況下，Ember使用RestAdapter查詢模型。此適配器假設您有一個後端系統，該系統向您的Ember客戶端應用程序提供JSON數據。由於我們沒有後端，在這種情況下，我們希望改為使用固定數據。因此，我們將更新適配器代碼如下所示：

ember generate model user

登入後複製

並向您的用戶模型添加以下內容以創建一些固定裝置。

import DS from 'ember-data';

export default DS.Model.extend({
});

登入後複製

如果您導航到URL localhost:4200/users，您只會看到舊的問候消息，而不會看到我們剛剛添加的用戶固定數據。要查看用戶數據，我們需要使用以下命令為用戶創建一個模板：

export default DS.Model.extend({
  firstName: DS.attr(),
  lastName: DS.attr(),
  addressLine: DS.attr(),
  postCode: DS.attr(),
  country: DS.attr()
});

登入後複製

這會在app/templates/文件夾中創建一個名為users.hbs的文件。打開此文件並將其內容更新如下：

Router.map(function() {
  this.resource('users', function() {
    this.route('show',{path: '/:user_id'});
    this.route('edit',{path: '/:user_id/edit'});
  });
});

登入後複製

您現在應該看到一個用戶列表，每個用戶旁邊都有一個編輯文本。因為我們固定數據中只有一個用戶，所以我們只會看到一個用戶。您可以根據需要向用戶固定裝置中添加更多用戶對象。只需確保每個對像都有一個唯一的ID。

顯示單個用戶

既然我們已經列出了我們的用戶，讓我們看看顯示用戶完整信息的方法。首先。通過將每個用戶名旁邊的“編輯”文本用鏈接括起來來更改users模板中的代碼。然後，將“編輯”更改為：

ember generate route users

登入後複製

接下來，讓我們使用以下命令生成一個用戶控制器：

import Ember from 'ember';

export default Ember.Route.extend({
  model: function(){
    return this.store.find('user');
  }
});

登入後複製

在（用戶控制器）內部，將內容更改為如下所示：

ember generate adapter application

登入後複製

完成後，使用以下命令生成一個用於編輯用戶的模板：

import DS from 'ember-data';

export default DS.FixtureAdapter.extend({
});

登入後複製

目前，創建的模板（app/templates/users/show.hbs）為空。打開它並添加以下代碼：

User.reopenClass({
   FIXTURES: [{
      id: 1,
      firstName: 'James',
      lastName: 'Rice',
      addressLine: '66 Belvue Road',
      postCode: 'M235PS',
      country: 'United Kingdom'
   }]
});

登入後複製

這樣做，您應該能夠看到您單擊的每個用戶的完整信息。

編輯單個用戶

如果您想編輯單個用戶，則必須遵循一些簡單的步驟。首先，通過將每個用戶名旁邊的“編輯”文本用鏈接括起來來鏈接到用戶編輯路由。然後，將“編輯”更改為：

npm install -g bower

登入後複製

接下來，讓我們使用以下命令生成一個用戶控制器：

npm install -g ember-cli

登入後複製

在（用戶控制器）內部，將內容更改為如下所示：

ember new contactmanager

登入後複製

完成後，使用以下命令生成一個用於編輯用戶的模板：

cd contactmanager
npm install
bower install

登入後複製

在新的模板app/templates/users/edit中，粘貼以下代碼：

ember serve

登入後複製

此代碼在提交表單時調用我們控制器上的saveUser()函數。該函數傳遞正在編輯的用戶並保存修改後的信息。有了此更改，當您單擊用戶的編輯鏈接時，您可以編輯其詳細信息。當您單擊保存按鈕時，您可以保存它們，之後您將被重定向回用戶列表。萬歲！我們現在有一個簡單的聯繫人列表管理器。您可以通過將其連接到真實後端來將其轉換為完整應用程序，以便在頁面刷新時持久化數據。我還鼓勵您向應用程序添加刪除功能，以便您可以隨時刪除不需要的用戶。

結論

Emberhttps://www.php.cn/link/0e0f9e664029e8912996d65c1cf09761是一個用於構建大型Web應用程序的框架。它具有約定優於配置的理念，這意味著它基於幾個常見的決定，並且具有許多默認（約定），這使得您的開發過程更容易。這樣，您在開發過程中就不必做出許多瑣碎的決定。我希望您喜歡閱讀本教程並學習了有關如何在您的項目中使用如此強大而簡單的JavaScript框架的新知識。請在下面的評論中告訴我們您的想法。您可以在GitHub上找到應用程序的代碼。

關於Ember入門和Ember CLI的常見問題