Aurelia - 快速指南

Aurelia - 概述

框架的最佳定義可以在 Aurelia 官方文件中找到 -

好吧，這實際上很簡單。Aurelia 只是 JavaScript。但是，它不是昨天的 JavaScript，而是明天的 JavaScript。透過使用現代工具，我們能夠從頭開始使用 ECMAScript 2016 編寫 Aurelia。這意味著我們有本機模組、類、裝飾器等等可以使用……你也可以使用它們。

Aurelia 不僅是用現代和未來的 JavaScript 編寫的，而且還採用了現代的架構方法。過去，框架一直是龐大的巨獸。但 Aurelia 不是。它構建為一系列協作庫。合在一起，它們形成了一個功能強大且健壯的框架，用於構建單頁應用程式 (SPA)。但是，Aurelia 的庫通常可以單獨使用，在傳統的網站上使用，甚至可以透過 NodeJS 等技術在伺服器端使用。

Aurelia - 特性

元件 - 元件是 Aurelia 框架的構建塊。它由 HTML 檢視和 JavaScript 檢視模型對組成。
Web 標準 - 這是最簡潔的現代框架之一，完全專注於 Web 標準，無需不必要的抽象。
可擴充套件 - 該框架提供了一種簡單的方法來與其他需要的工具整合。
商業支援 - Aurelia 提供商業和企業支援。它是 Durandal Inc. 的官方產品。
許可證 - Aurelia 是開源的，並根據 MIT 許可證授權。

Aurelia - 優勢

Aurelia 非常簡潔。如果您遵循框架約定，您就可以專注於您的應用程式，而不會讓框架妨礙您。
它也很容易擴充套件。您可以新增或刪除框架提供的任何工具，也可以新增任何其他不是框架一部分的工具。
Aurelia 非常易於使用。它面向開發人員體驗。它節省了您大量時間。
框架本身面向 Web 標準，因此您將始終與現代概念保持同步。
Aurelia 的社群規模不是最大，但它非常敏捷、知識淵博，並且願意在短時間內提供幫助。

侷限性

沒有主要的限制。該框架功能強大且易於使用。

Aurelia - 環境設定

在本節中，您將學習如何開始使用 Aurelia 框架。在您這樣做之前，您需要在您的系統上安裝NodeJS。

序號	軟體和描述
1	NodeJS 和 NPM NodeJS 是 Aurelia 開發所需的平臺。檢視我們的NodeJS 環境設定。

步驟 1 - 下載 Aurelia 包

在下載 Aurelia 包之前，讓我們在桌面上建立一個資料夾來放置我們的應用程式。

C:\Users\username\Desktop>mkdir aureliaApp

現在我們可以從官方Aurelia 網站下載該包。

Aurelia 支援ES2016 和TypeScript。我們將使用ES2016。將下載的檔案解壓縮到我們上面建立的aureliaApp資料夾中。

步驟 2 - 安裝 Web 伺服器

首先，我們需要從命令提示符視窗安裝 Web 伺服器。

C:\Users\username\Desktop\aureliaApp>npm install http-server -g

步驟 3 - 啟動 Web 伺服器

要啟動 Web 伺服器，我們需要在命令提示符中執行以下程式碼。

C:\Users\username\Desktop\aureliaApp>http-server -o -c-1

我們可以在瀏覽器中看到我們的第一個 Aurelia 應用程式。

Aurelia - 第一個應用

在本節中，我們將解釋我們在上一節中建立的 Aurelia 啟動應用程式。我們還將指導您完成資料夾結構，以便您掌握 Aurelia 框架背後的核心概念。

資料夾結構

package.json 代表有關已安裝的npm 包的文件。它還顯示了這些包的版本，並提供了一種簡單的方法來新增、刪除、更改版本或在需要在開發人員之間共享應用程式時自動安裝所有包。
index.html 是應用程式的預設頁面，就像大多數基於 HTML 的應用程式一樣。它是載入指令碼和樣式表的地方。
config.js 是 Aurelia 載入器配置檔案。您不會花太多時間使用此檔案。
jspm_packages 是SystemJS 載入的模組的目錄。
styles 是預設樣式目錄。您可以隨時更改儲存樣式檔案的位置。
src 資料夾是您將花費大部分開發時間的地方。它儲存HTML 和js 檔案。

原始檔

正如我們之前所說，src 目錄是儲存應用程式邏輯的地方。如果您檢視預設應用程式，您會發現app.js 和app.html 非常簡單。

Aurelia 允許我們使用 JavaScript 核心語言進行類定義。以下預設示例顯示了 EC6 類。

app.js

export class App {
   message = 'Welcome to Aurelia!';
}

message 屬性使用${message}語法繫結到 HTML 模板。此語法表示轉換為字串並顯示在模板檢視中的一向繫結。

app.html

<template>
   <h1>${message}</h1>
</template>

正如我們在上一節中討論的那樣，我們可以透過在命令提示符視窗中執行以下命令來啟動伺服器。

C:\Users\username\Desktop\aureliaApp>http-server -o -c-1

應用程式將在螢幕上呈現。

Aurelia - 元件

元件是 Aurelia 框架的主要構建塊。在本節中，您將學習如何建立簡單的元件。

簡單元件

如前一節所述，每個元件都包含用JavaScript編寫的檢視模型和用HTML編寫的檢視。您可以看到以下檢視模型定義。它是一個ES6示例，但您也可以使用TypeScript。

app.js

export class MyComponent {
   header = "This is Header";
   content = "This is content";
}

我們可以將我們的值繫結到檢視，如以下示例所示。${header}語法將繫結來自MyComponent的定義的header值。相同的概念應用於content。

app.html

<template>
   <h1>${header}</h1>
   <p>${content}</p>
</template>

以上程式碼將產生以下輸出。

元件函式

如果要在使用者點選按鈕時更新頁首和頁尾，可以使用以下示例。這次我們在EC6類建構函式中定義header和footer。

app.js

export class App{  
   constructor() {
      this.header = 'This is Header';
      this.content = 'This is content';
   }
   updateContent() {
      this.header = 'This is NEW header...'
      this.content = 'This is NEW content...';
   }
}

我們可以新增click.delegate()將updateContent()函式與按鈕連線起來。我們將在後續章節中詳細介紹這一點。

app.html

<template>
   <h1>${header}</h1>
   <p>${content}</p>
   <button click.delegate = "updateContent()">Update Content</button>
</template>

單擊按鈕後，將更新頁首和內容。

Aurelia - 元件生命週期

Aurelia 使用元件生命週期方法來操作元件生命週期。在本節中，我們將向您展示這些方法並解釋元件生命週期。

constructor() - 建構函式方法用於初始化使用類建立的物件。此方法首先被呼叫。如果您沒有指定此方法，則將使用預設建構函式。
created(owningView, myView) - 一旦建立了檢視和檢視模型並將其連線到控制器，就會呼叫此方法。此方法接受兩個引數。第一個是宣告元件的檢視(owningView)。第二個是元件檢視(myView)。
bind(bindingContext, overrideContext) - 在此時，繫結已開始。第一個引數表示元件的繫結上下文。第二個是overrideContext。此引數用於新增其他上下文屬性。
attached() - 一旦元件附加到 DOM，就會呼叫附加方法。
detached() - 此方法與attached相反。當元件從 DOM 中刪除時呼叫它。
unbind() - 最後一個生命週期方法是unbind。當元件解除繫結時呼叫它。

當您希望對元件有更多控制時，生命週期方法很有用。當您需要在元件生命週期的某個點觸發某些功能時，可以使用它們。

所有生命週期方法如下所示。

app.js

export class App {
   constructor(argument) {
      // Create and initialize your class object here...
   }

   created(owningView, myView) {
      // Invoked once the component is created...
   }

   bind(bindingContext, overrideContext) {
      // Invoked once the databinding is activated...
   }

   attached(argument) {
      // Invoked once the component is attached to the DOM...
   }

   detached(argument) {
      // Invoked when component is detached from the dom
   }

   unbind(argument) {
      // Invoked when component is unbound...
   }
}

Aurelia - 自定義元素

Aurelia 提供了一種動態新增元件的方法。您可以在應用程式的不同部分重用單個元件，而無需多次包含 HTML。在本節中，您將學習如何實現這一點。

步驟 1 - 建立自定義元件

讓我們在src資料夾內建立一個新的components目錄。

C:\Users\username\Desktop\aureliaApp\src>mkdir components

在此目錄中，我們將建立custom-component.html。此元件稍後將插入 HTML 頁面中。

custom-component.html

<template>
   <p>This is some text from dynamic component...</p>
</template>

步驟 2 - 建立主元件

我們將在app.js中建立一個簡單的元件。它將用於在螢幕上呈現header和footer文字。

app.js

export class MyComponent {
   header = "This is Header";
   content = "This is content";
}

步驟 3 - 新增自定義元件

在我們的app.html檔案中，我們需要requirecustom-component.html才能動態插入它。完成後，我們可以新增一個新元素custom-component。

app.html

<template>
   <require from = "./components/custom-component.html"></require>

   <h1>${header}</h1>
   <p>${content}</p>
   <custom-component></custom-component>
</template>

以下是輸出。Header和Footer文字從app.js內的myComponent呈現。附加文字從custom-component.js呈現。

Aurelia - 依賴注入

在本節中，您將學習如何使用 Aurelia 依賴注入庫。

首先，我們需要在src資料夾內建立新檔案dependency-test.js。在此檔案中，我們將建立一個簡單的類DependencyTest。此類稍後將作為依賴項注入。

src/dependency-test.js

export class DependencyTest {
   constructor() {
      this.test = "Test is succesfull!!!";
   }
}

注入

在我們的app.js檔案中，我們正在匯入inject庫和我們上面建立的DependencyTest類。要注入該類，我們使用@inject()函式。我們的App類只會將其記錄到開發者控制檯。

import {inject} from 'aurelia-framework';
import {DependencyTest} from './dependency-test';

@inject(DependencyTest)

export class App {
   constructor(DependencyTest) {
      console.log(DependencyTest);
   }
}

我們可以檢查控制檯以檢視是否注入了DependencyTest類。

後續章節將提供更多 Aurelia 依賴注入的示例。

Aurelia - 配置

在本節中，我們將向您展示如何根據您的需要配置 Aurelia 框架。有時，您需要在應用程式呈現給使用者之前設定初始配置或執行一些程式碼。

步驟 1 - 建立 main.js

讓我們在src資料夾內建立main.js檔案。在此檔案中，我們將配置 Aurelia。

您還需要告訴 Aurelia 載入配置模組。您可以在以下示例中看到註釋部分。

index.html

<!DOCTYPE html>
<html>
   <head>
      <title>Aurelia</title>
      <link rel = "stylesheet" href = "styles/styles.css">
      <meta name = "viewport" content = "width=device-width, initial-scale = 1">
   </head>

   <body aurelia-app = "main"> 
      <!--Add "main" value to "aurelia-app" attribute... -->
      <script src = "jspm_packages/system.js"></script>
      <script src = "config.js"></script>
		
      <script>
         SystemJS.import('aurelia-bootstrapper');
      </script>
   </body>
</html>

步驟 2 - 預設配置

以下程式碼展示瞭如何使用預設配置。configure 函式允許手動設定配置。我們正在設定 use 屬性以指定我們需要的內容。

main.js

export function configure(aurelia) {
   aurelia.use
   .standardConfiguration()
   .developmentLogging();

   aurelia.start().then(() => aurelia.setRoot());
}

步驟 3 - 高階配置

我們可以使用許多配置選項。本文件的範圍不包括向您展示所有內容，因此我們將透過以下示例說明配置的工作原理。我們基本上是在告訴 Aurelia 使用預設資料繫結語言、預設資源、開發日誌記錄、路由器、歷史記錄和事件聚合器。這些是一組標準外掛。

export function configure(aurelia) {
   aurelia.use
   .defaultBindingLanguage()
   .defaultResources()
   .developmentLogging()
   .router()
   .history()
   .eventAggregator();

   aurelia.start().then(() => aurelia.setRoot());
}

注意 - 這些設定將在下一章中詳細解釋。

Aurelia - 外掛

當您開始構建應用程式時，大多數情況下您會想要使用一些額外的外掛。在本章中，您將學習如何在 Aurelia 框架中使用外掛。

標準外掛

在上一章中，我們瞭解瞭如何在 Aurelia 框架中使用預設配置。如果您使用預設配置，則可以使用一組標準外掛。

defaultBindingLanguage() - 此外掛提供了一種將檢視模型與檢視連線的簡單方法。您已經看到了單向資料繫結語法(${someValue})。即使您可以使用其他繫結語言，也建議使用預設繫結語言。
defaultResources() - 預設資源為我們提供了一些基本結構，例如if、repeat、compose等。您甚至可以自己構建這些結構，但由於它們使用得如此普遍，Aurelia 已經在該庫中建立了它們。
Router() - 大多數應用程式都使用某種路由。因此，Router 是標準外掛的一部分。您可以在後續章節中檢視有關路由的更多資訊。
History() - History 外掛通常與router一起使用。
eventAggregator() - 此外掛用於跨元件通訊。它處理在應用程式內部發布和訂閱訊息或通道。

官方外掛

這些外掛不是預設配置的一部分，但經常使用。

fetch() - Fetch 外掛用於處理 HTTP 請求。如果需要，您可以使用其他 AJAX 庫。
animatorCSS() - 此外掛提供了一種處理 CSS 動畫的方法。
animator-velocity() - 您可以使用 Velocity 動畫庫而不是 CSS 動畫。這些外掛使我們能夠在 Aurelia 應用程式中使用 Velocity。
dialog() - Dialog 外掛提供了一個高度可定製的模態視窗。
i18n() - 這是用於國際化和本地化的外掛。
ui-virtualization() - 虛擬化是一個用於處理大型效能密集型 UI 任務的有用庫。
validation() - 當您需要驗證資料時，請使用此外掛。

在撰寫本教程時，上面解釋的所有外掛均由 Aurelia 核心團隊官方維護。將來會新增一些其他有用的外掛。以下示例展示瞭如何配置應用程式以使用外掛。

安裝外掛

例如，如果我們想使用animator-css和animator-velocity，我們需要先安裝它們。

C:\Users\username\Desktop\aureliaApp>jspm install aurelia-animator-css
C:\Users\username\Desktop\aureliaApp>jspm install aurelia-animator-velocity

在上一章中，您學習瞭如何使用手動配置。我們可以在main.js檔案中新增我們的外掛。

main.js

export function configure(aurelia) {
   aurelia.use
   .defaultBindingLanguage()
   .defaultResources()
   .developmentLogging()
   .router()
   .history()
   .eventAggregator()
   .plugin('aurelia-animatorCSS')
   .plugin('aurelia-animator-velocity')

   aurelia.start().then(() => aurelia.setRoot());
}

Aurelia - 資料繫結

Aurelia 有自己的資料繫結系統。在本章中，您將學習如何使用 Aurelia 繫結資料，並解釋不同的繫結機制。

簡單繫結

您已經在我們之前的一些章節中看到了簡單繫結。${...}語法用於連結檢視模型和檢視。

app.js

export class App {  
   constructor() {
      this.myData = 'Welcome to Aurelia app!';
   }
}

app.html

<template>
   <h3>${myData}</h3>
</template>

雙向繫結

Aurelia 的優勢在於其簡單性。當我們繫結到input欄位時，雙向資料繫結會自動設定。

app.js

export class App {  
   constructor() {
      this.myData = 'Enter some text!';
   }
}

app.html

<template>
   <input id = "name" type = "text" value.bind = "myData" />
   <h3>${myData}</h3>
</template>

現在，我們的檢視模型和檢視已連結。每當我們在input欄位中輸入一些文字時，檢視都會更新。

Aurelia - 繫結行為

在本章中，您將學習如何使用行為。您可以將繫結行為視為一個過濾器，它可以更改繫結資料並以不同的格式顯示它。

節流

此行為用於設定某些繫結更新應該發生的頻率。我們可以使用throttle來降低更新輸入檢視模型的速率。考慮上一章中的示例。預設速率為200 毫秒。我們可以透過在我們的輸入中新增& throttle:2000將其更改為2 秒。

app.js

export class App {  
   constructor() {
      this.myData = 'Enter some text!';
   }
}

app.html

<template>
   <input id = "name" type = "text" value.bind = "myData & throttle:2000" />
   <h3>${myData}</h3>
</template>

去抖動

debounce與throttle幾乎相同。不同之處在於，去抖動將在使用者停止鍵入後更新繫結。以下示例將在使用者停止鍵入兩秒鐘後更新繫結。

app.js

export class App {  
   constructor() {
      this.myData = 'Enter some text!';
   }
}

app.html

<template>
   <input id = "name" type = "text" value.bind = "myData & debounce:2000" />
   <h3>${myData}</h3>
</template>

一次性

oneTime是效能方面最有效的行為。當您知道資料應該只繫結一次時，應始終使用它。

app.js

export class App {  
   constructor() {
      this.myData = 'Enter some text!';
   }
}

app.html

<template>
   <input id = "name" type = "text" value.bind = "myData & oneTime" />
   <h3>${myData}</h3>
</template>

以上示例會將文字繫結到檢視。但是，如果我們更改預設文字，則不會發生任何事情，因為它只綁定了一次。

Aurelia - 轉換器

如果需要在 Aurelia 應用程式中轉換某些值，可以使用轉換器，而不是手動將值轉換為所需的格式。

轉換日期

當我們想要將預設日期值轉換為某些特定格式時，可以使用momentJS庫。這是一個用於操作日期的小型庫。

C:\Users\username\Desktop\aureliaApp>jspm install moment

讓我們建立一個新檔案converters.js。我們將使用此檔案新增轉換器特定的程式碼。使用以下命令或手動建立檔案。

C:\Users\username\Desktop\aureliaApp>touch converters.js

converter.js

在此檔案中，我們將匯入moment庫並將DateFormatValueConverter設定為僅返回月、日和年值，而無需其他資料。需要注意的重要一點是，Aurelia 可以識別任何以ValueConverter結尾的類。這就是我們的類名為DateFormatValueConverter的原因。此類將註冊為dateFormat，我們以後可以在檢視中使用它。

converters.js

import moment from 'moment';

export class DateFormatValueConverter {
   toView(value) {
      return moment(value).format('M/D/YYYY');
   }
}

在app.js中，我們將只使用當前日期。這將是我們的檢視模型。

app.js

export class App {
   constructor() {
      this.currentDate = new Date();
   }
}

我們已經在自定義元素章節中討論過require。管道符號 | 用於應用轉換器。我們僅使用dateFormat，因為這是 Aurelia 註冊DateFormatValueConverter的方式。

app.html

<template>
   <require from = "./converters"></require>

   <h3>${currentDate | dateFormat}</h3>
</template>

轉換貨幣

這是貨幣格式化的示例。您會注意到該概念與以上示例相同。首先，我們需要從命令提示符安裝numeral庫。

C:\Users\username\Desktop\aureliaApp>jspm install numeral

轉換器將設定貨幣格式。

converters.js

import numeral from 'numeral';

export class CurrencyFormatValueConverter {
   toView(value) {
      return numeral(value).format('($0,0.00)');
   }
}

檢視模型只會生成一個隨機數。我們將將其用作貨幣值並每秒更新一次。

app.js

export class App {
   constructor() {
      this.update();
      setInterval(() => this.update(), 1000);
   }
   update() {
      this.myCurrency = Math.random() * 1000;
   }
}

我們的檢視將顯示轉換後的隨機生成的數字，作為貨幣。

app.html

<template>
   <require from = "./converters"></require>

   <h3>${myCurrency | currencyFormat}</h3>
</template>

Aurelia - 事件

在本章中，您將學習有關 Aurelia 事件的知識。

事件委託

事件委託是一個有用的概念，其中事件處理程式附加到一個頂級元素，而不是 DOM 上的多個元素。這將提高應用程式的記憶體效率，應儘可能使用。

這是一個使用 Aurelia 框架進行事件委託的簡單示例。我們的檢視將有一個帶有click.delegate事件附加的按鈕。

app.html

<template>
   <button click.delegate = "myFunction()">CLICK ME</button>
</template>

單擊按鈕後，將呼叫myFunction()。

app.js

export class App {
   myFunction() {
      console.log('The function is triggered...');
   }
}

我們將獲得以下輸出。

事件觸發

在某些情況下，您無法使用委託。某些 JavaScript 事件不支援委託；IOS 對某些元素支援它。要了解哪些事件允許委託，您可以搜尋任何事件的bubble屬性此處。在這些情況下，您可以使用trigger()方法。

以上示例中的相同功能可以使用click.trigger建立。

app.html

<template>
   <button click.trigger = "myFunction()">CLICK ME</button>
</template>

app.js

export class App {
   myFunction() {
      console.log('The function is triggered...');
   }
}

Aurelia - 事件聚合器

當您的事件需要附加到更多偵聽器或當您需要觀察應用程式的某些功能並等待資料更新時，應使用事件聚合器。

Aurelia 事件聚合器有三種方法。publish方法將觸發事件，並且可以被多個訂閱者使用。要訂閱事件，我們可以使用subscribe方法。最後，我們可以使用dispose方法分離訂閱者。以下示例演示了這一點。

我們的檢視將僅為這三個功能中的每一個提供三個按鈕。

app.html

<template>
   <button click.delegate = "publish()">PUBLISH</button><br/>
   <button click.delegate = "subscribe()">SUBSCRIBE</button><br/>
   <button click.delegate = "dispose()">DISPOSE</button>
</template>

我們需要匯入eventAggregator並在能夠使用它之前注入它。

app.js

import {inject} from 'aurelia-framework';
import {EventAggregator} from 'aurelia-event-aggregator';

@inject(EventAggregator)
export class App {
   constructor(eventAggregator) {
      this.eventAggregator = eventAggregator;
   }
   publish() {
      var payload = 'This is some data...';
      this.eventAggregator.publish('myEventName', payload);
   }
   subscribe() {
      this.subscriber = this.eventAggregator.subscribe('myEventName', payload => {
         console.log(payload);
      });
   }
   dispose() {
      this.subscriber.dispose();
      console.log('Disposed!!!');
   }
}

我們需要單擊SUBSCRIBE按鈕以偵聽將來發布的資料。一旦訂閱者附加，每當傳送新資料時，控制檯都會記錄它。如果我們單擊PUBLISH按鈕五次，我們會看到它每次都被記錄。

我們還可以透過單擊DISPOSE按鈕分離我們的訂閱者。

Aurelia - 表單

在本章中，您將學習如何在 Aurelia 框架中使用表單。

文字輸入

首先，我們將瞭解如何提交input表單。該檢視將有兩個用於使用者名稱和密碼的輸入表單。我們將使用value.bind進行資料繫結。

app.html

<template>  
   <form role = "form" submit.delegate = "signup()">
      
      <label for = "email">Email</label>
      <input type = "text" value.bind = "email" placeholder = "Email">

      <label for = "password">Password</label>
      <input type = "password" value.bind = "password" placeholder = "Password">

      <button type = "submit">Signup</button>
   </form>
</template>

signup 函式將只從輸入中獲取使用者名稱和密碼值，並在開發人員控制檯中記錄它。

export class App {
   email = '';
   password = '';

   signup() {
      var myUser = { email: this.email, password: this.password }
      console.log(myUser);
   };
}

複選框

以下示例將演示如何使用 Aurelia 框架提交複選框。我們將建立一個複選框並將checked值繫結到我們的檢視模型。

app.html

<template>
   <form role = "form" submit.delegate = "submit()">
   
      <label for = "checkbox">Checkbox</label>
      <input type = "checkbox" id = "checkbox" checked.bind = "isChecked"><br/>
      <button type = "submit">SUBMIT</button>
      
   </form>
</template>

表單提交將只在控制檯中記錄checked值。

app.js

export class App  {
   constructor() {
      this.isChecked = false;
   }
   submit() {
      console.log("isChecked: " + this.isChecked);
   }
}

單選按鈕

以下示例將演示如何提交單選按鈕。語法repeat.for = "option of options"將遍歷物件陣列併為每個物件建立一個單選按鈕。這是在 Aurelia 框架中動態建立元素的一種簡潔方法。其餘部分與前面的示例相同。我們正在繫結model和checked值。

app.html

<template>
   <form role = "form" submit.delegate = "submit()">
	
      <label repeat.for = "option of options">
         <input type = "radio" name = "myOptions" 
            model.bind = "option" checked.bind = "$parent.selectedOption"/>
            ${option.text}
      </label>
      <br/>
		
      <button type = "submit">SUBMIT</button>
   </form>
</template>

在我們的檢視模型中，我們將建立一個物件陣列this.options並指定第一個單選按鈕被選中。同樣，SUBMIT按鈕將只在控制檯中記錄哪個單選按鈕被選中。

app.js

export class PeriodPanel {
   options = [];
   selectedOption = {};

   constructor() {
      this.options = [
         {id:1, text:'First'}, 
         {id:2, text:'Second'}, 
         {id:3, text:'Third'}
      ]; 
      this.selectedOption = this.options[0];
   }
   submit() {
      console.log('checked: ' + this.selectedOption.id);
   }
}

如果我們選中第三個單選按鈕並提交表單，控制檯將顯示它。

Aurelia - HTTP

在本章中，您將學習如何在 Aurelia 框架中處理 HTTP 請求。

步驟 1 - 建立檢視

讓我們建立四個按鈕，用於將請求傳送到我們的 API。

app.html

<template>
   <button click.delegate = "getData()">GET</button>
   <button click.delegate = "postData()">POST</button>
   <button click.delegate = "updateData()">PUT</button>
   <button click.delegate = "deleteData()">DEL</button>
</template>

步驟 2 - 建立檢視模型

為了將請求傳送到伺服器，Aurelia 建議使用fetch客戶端。我們正在為我們需要的每個請求（GET、POST、PUT 和 DELETE）建立函式。

import 'fetch';
import {HttpClient, json} from 'aurelia-fetch-client';

let httpClient = new HttpClient();

export class App {
   getData() {
      httpClient.fetch('http://jsonplaceholder.typicode.com/posts/1')
      .then(response => response.json())
      .then(data => {
         console.log(data);
      });
   }
   myPostData = { 
      id: 101
   }
	postData(myPostData) {
      httpClient.fetch('http://jsonplaceholder.typicode.com/posts', {
         method: "POST",
         body: JSON.stringify(myPostData)
      })
		
      .then(response => response.json())
      .then(data => {
         console.log(data);
      });
   }
   myUpdateData = {
      id: 1
   }
	updateData(myUpdateData) {
      httpClient.fetch('http://jsonplaceholder.typicode.com/posts/1', {
         method: "PUT",
         body: JSON.stringify(myUpdateData)
      })
		
      .then(response => response.json())
      .then(data => {
         console.log(data);
      });
   }
   deleteData() {
      httpClient.fetch('http://jsonplaceholder.typicode.com/posts/1', {
         method: "DELETE"
      })
      .then(response => response.json())
      .then(data => {
         console.log(data);
      });
   }
}

我們可以執行應用程式並分別點選GET、POST、PUT和DEL按鈕。我們可以在控制檯中看到每個請求都成功，並且結果已記錄。

Aurelia - Refs

在本章中，您將看到一些Aurelia refs的簡單示例。您可以使用它來建立對特定物件的引用。您可以建立對元素或屬性的引用，如下表所示。

引用表

序號	示例 & 描述
1	ref = "myRef" 用於建立對DOM元素的引用。
2	attribute-name.ref = "myRef" 用於建立對自定義屬性的檢視模型的引用。
3	view-model.ref = "myRef 用於建立對自定義元素的檢視模型的引用。
4	view.ref = "myRef" 用於建立對自定義元素檢視例項的引用。
5	rcontroller.ref = "myRef" 用於建立對自定義元素的控制器例項的引用。

在以下示例中，我們將建立對input元素的引用。我們將使用預設的類語法作為view-model。

app.js

export class App { }

我們透過新增ref = "name"屬性來建立對input元素的引用。

app.html

<template>
   <input type = "text" ref = "name"><br/>
   <h3>${name.value}</h3>
</template>

當我們執行應用程式時，我們將看到輸入欄位中輸入的文字顯示在螢幕上。

Aurelia - 路由

路由是每個應用程式的重要組成部分。在本章中，您將學習如何在Aurelia框架中使用路由器。

步驟 1 - 建立頁面

我們已經在前面章節中建立了一個components資料夾。如果您還沒有建立它，則應將其放在src資料夾內。

C:\Users\username\Desktop\aureliaApp\src>mkdir components

在這個資料夾中，我們將建立home和about目錄。

C:\Users\username\Desktop\aureliaApp\src\components>mkdir home
C:\Users\username\Desktop\aureliaApp\src\components>mkdir about

在home資料夾中，我們需要建立view和view-model檔案。

C:\Users\username\Desktop\aureliaApp\src\components\home>touch home.js
C:\Users\username\Desktop\aureliaApp\src\components\home>touch home.html

我們還需要view和view-model用於about頁面。

C:\Users\username\Desktop\aureliaApp\src\components\about>touch about.js
C:\Users\username\Desktop\aureliaApp\src\components\about>touch about.html

注意 - 您也可以手動建立所有上述資料夾。

步驟 2 - 頁面

接下來，我們需要向我們建立的檔案新增一些預設程式碼。

home.html

<template>
   <h1>HOME</h1>
</template>

home.js

export class Home {}

about.html

<template>
   <h1>ABOUT</h1>
</template>

about.js

export class About {}

步驟 3 - 路由器

我們將在app.js檔案中為router建立view-model。

app.js

export class App {
   configureRouter(config, router) {
      config.title = 'Aurelia';
		
      config.map([
         { route: ['','home'],  name: 'home',  
            moduleId: './components/home/home',  nav: true, title:'Home' },
         { route: 'about',  name: 'about',
            moduleId: './components/about/about',    nav: true, title:'About' }
      ]);

      this.router = router;
   }
}

我們的路由器view將放置在app.html中。

app.html

<template>
   <nav>
      <ul>
         <li repeat.for = "row of router.navigation">
            <a href.bind = "row.href">${row.title}</a>
         </li>
      </ul>
   </nav>	
   <router-view></router-view>
</template>

當我們執行應用程式時，可以透過點選home或about連結來更改路由。

Aurelia - 歷史記錄

在本章中，您將學習如何使用aurelia-history外掛。

步驟 1 - 安裝外掛

此外掛作為標準配置的一部分已可用。如果您已將aurelia.use.standardConfiguration()作為手動配置的一部分設定，那麼您就可以開始了。

main.js

export function configure(aurelia) {
   aurelia.use
   .standardConfiguration()
   .developmentLogging();

   aurelia.start().then(() => aurelia.setRoot());
}

步驟 2 - 使用歷史記錄

我們將使用上一章（Aurelia - 路由）中的一個示例。如果我們想要設定導航後退或前進的功能，我們可以使用帶有back()和forward()方法的history物件。我們將在路由器配置之後新增它。

app.js

export class App {
   configureRouter(config, router) {
      config.title = 'Aurelia';
      config.map([
         { route: ['','home'],  name: 'home',  
            moduleId: './pages/home/home',  nav: true, title:'Home' },
         { route: 'about',  name: 'about',    
            moduleId: './pages/about/about',    nav: true, title:'About' }
      ]);
      this.router = router;
   }
   goBack() {
      history.back();
   }
	goForward() {
      history.forward();
   }
}

現在，讓我們向我們的view新增兩個按鈕。

app.html

<template>
   <nav>
      <ul>
         <li repeat.for = "row of router.navigation">      
            <a href.bind = "row.href">${row.title}</a>
         </li>
      </ul>
   </nav>
	
   <button click.delegate = "goBack()"></button> 
   //The button used for navigationg back...
	
   <button click.delegate = "goForward()"></button> 
   //The button used for navigationg forward...
	
   <router-view></router-view>
</template>

使用者可以透過點選我們新增的按鈕來前後導航。

Aurelia - 動畫

在本章中，您將學習如何在Aurelia框架中使用CSS動畫。

步驟 1 - 檢視

我們的檢視將有一個將被動畫化的元素和一個用於觸發animateElement()函式的按鈕。

app.html

<template>
   <div class = "myElement"></div>
   <button click.delegate = "animateElement()">ANIMATE</button>
</template>

步驟 2 - 檢視模型

在我們的JavaScript檔案中，我們將匯入CssAnimator外掛並將其注入為依賴項。animateElement函式將呼叫動畫器以啟動動畫。動畫將在下一步建立。

import {CssAnimator} from 'aurelia-animator-css';
import {inject} from 'aurelia-framework';

@inject(CssAnimator, Element)
export class App {
   constructor(animator, element) {
      this.animator = animator;
      this.element = element;
   }

   animateElement() {
      var myElement = this.element.querySelector('.myElement');
      this.animator.animate(myElement, 'myAnimation');
   }
}

步驟 3 - 樣式

我們將在styles/styles.css檔案中編寫CSS。.myAnimation-add是動畫的起點，而.myAnimation-remove是在動畫完成後呼叫的。

styles.css

.myElement {
   width:100px;
   height: 100px;
   border:1px solid blue;
}

.myAnimation-add {
   -webkit-animation: changeBack 3s;
   animation: changeBack 3s;
}

.myAnimation-remove {
   -webkit-animation: fadeIn 3s;
   animation: fadeIn 3s;
}

@-webkit-keyframes changeBack {
   0% { background-color: #e6efff; }
   25% { background-color: #4d91ff; }
   50% { background-color: #0058e6; }
   75% { background-color: #003180; }
   100% { background-color: #000a1a; }
}

@keyframes changeBack {
   0% { background-color: #000a1a; }
   25% { background-color: #003180; }
   50% { background-color: #0058e6; }
   75% { background-color: #4d91ff; }
   100% { background-color: #e6efff; }
}

一旦點選ANIMATE按鈕，背景顏色將從淺藍色更改為深色陰影。當此動畫在三秒後完成時，元素將淡入其初始狀態。

Aurelia - 對話方塊

Aurelia提供了一種實現對話方塊（模態）視窗的方法。在本章中，我們將向您展示如何使用它。

步驟 1 - 安裝對話方塊外掛

對話方塊外掛可以從命令提示符視窗安裝。

C:\Users\username\Desktop\aureliaApp>jspm install aurelia-dialog

為了使此外掛能夠工作，我們需要使用手動引導。我們在配置章節中介紹了這一點。在main.js檔案中，我們需要新增aurelia-dialog外掛。

main.js

export function configure(aurelia) {
   aurelia.use
   .standardConfiguration()
   .developmentLogging()
   .plugin('aurelia-dialog'); 

   aurelia.start().then(() => aurelia.setRoot());
}

步驟 2 - 建立資料夾和檔案

首先，我們將建立一個名為modal的新目錄。讓我們將其放在components資料夾內。開啟命令提示符並執行以下程式碼。

C:\Users\username\Desktop\aureliaApp\src\components>mkdir modal

在這個資料夾中，我們將建立兩個新檔案。這些檔案將代表我們模態的view和view-model。

C:\Users\username\Desktop\aureliaApp\src\components\modal>touch my-modal.html
C:\Users\username\Desktop\aureliaApp\src\components\modal>touch my-modal.js

步驟 3 - 建立模態

首先，讓我們新增view-model程式碼。我們需要匯入並注入dialog-controller。此控制器用於處理模態特定的功能。在以下示例中，我們使用它來水平居中模態。

my-modal.js

import {inject} from 'aurelia-framework';
import {DialogController} from 'aurelia-dialog';

@inject(DialogController)

export class Prompt {
   constructor(controller) {
      this.controller = controller;
      this.answer = null;

      controller.settings.centerHorizontalOnly = true;
   }
   activate(message) {
      this.message = message;
   }
}

view程式碼如下所示。按鈕被點選時將開啟或關閉模態。

my-modal.html

<template>
   <ai-dialog>
      <ai-dialog-body>
         <h2>${message}</h2>
      </ai-dialog-body>

      <ai-dialog-footer>
         <button click.trigger = "controller.cancel()">Cancel</button>
         <button click.trigger = "controller.ok(message)">Ok</button>
      </ai-dialog-footer>	
   </ai-dialog>	
</template>

步驟 4 - 觸發模態

最後一步是觸發模態的函式。我們需要匯入並注入DialogService。此服務具有方法open，我們可以在其中傳遞my-modal檔案中的view-model和model，以便我們可以動態繫結資料。

app.js

import {DialogService} from 'aurelia-dialog';
import {inject} from 'aurelia-framework';
import {Prompt} from './components/modal/my-modal';

@inject(DialogService)

export class App {
   constructor(dialogService) {
      this.dialogService = dialogService;
   }
   openModal() {
      this.dialogService.open( {viewModel: Prompt, model: 'Are you sure?' }).then(response => {
         console.log(response);
			
         if (!response.wasCancelled) {
            console.log('OK');
         } else {
            console.log('cancelled');
         }
         console.log(response.output);
      });
   }
};

最後，我們將建立一個按鈕，以便我們可以呼叫openModal函式。

app.html

<template>
   <button click.trigger = "openModal()">OPEN MODAL</button>
<template>

如果我們執行應用程式，我們可以點選OPEN MODAL按鈕來觸發一個新的模態視窗。

Aurelia - 本地化

Aurelia提供i18n外掛。在本章中，您將學習如何使用此外掛本地化您的應用程式。

步驟 1 - 安裝外掛

開啟命令提示符視窗並執行以下程式碼以安裝i18n外掛。

C:\Users\username\Desktop\aureliaApp>jspm install aurelia-i18n

我們還需要安裝後端外掛。

C:\Users\username\Desktop\aureliaApp>jspm install npm:i18next-xhr-backend

步驟 2 - 建立資料夾和檔案

在專案根資料夾中，我們需要建立一個locale目錄。

C:\Users\username\Desktop\aureliaApp>mkdir locale

在此資料夾中，您需要為所需的任何語言新增新資料夾。我們將建立en並在其中包含translation.js檔案。

C:\Users\username\Desktop\aureliaApp\locale>mkdir en
C:\Users\username\Desktop\aureliaApp\locale\en>touch translation.json

步驟 3 - 使用外掛

您需要使用手動引導才能使用此外掛。有關更多資訊，請檢視配置章節。我們需要將i18n外掛新增到main.js檔案中。

main.js

import {I18N} from 'aurelia-i18n';
import XHR from 'i18next-xhr-backend';

export function configure(aurelia) {
   aurelia.use
   .standardConfiguration()
   .developmentLogging()
	
   .plugin('aurelia-i18n', (instance) => {
      // register backend plugin
      instance.i18next.use(XHR);

      // adapt options to your needs (see http://i18next.com/docs/options/)
      instance.setup({
         backend: {                                  
            loadPath: '/locales/{{lng}}/{{ns}}.json',
         },
				
         lng : 'de',
         attributes : ['t','i18n'],
         fallbackLng : 'en',
         debug : false
      });
   });

   aurelia.start().then(a => a.setRoot());
}

步驟 4 - 翻譯JSON檔案

這是您可以設定翻譯值的檔案。我們將使用官方文件中的一個示例。de-DE資料夾實際上應該用於翻譯成德語，但是為了便於理解，我們將使用英語短語。

translation.json

{
   "score": "Score: {{score}}",
   "lives": "{{count}} life remaining",
   "lives_plural": "{{count}} lives remaining",
   "lives_indefinite": "a life remaining",
   "lives_plural_indefinite": "some lives remaining",
   "friend": "A friend",
   "friend_male": "A boyfriend",
   "friend_female": "A girlfriend"
}

步驟 5 - 設定語言環境

我們只需要匯入i18n外掛並將其設定為使用de-DE資料夾中的JSON程式碼。

app.js

import {I18N} from 'aurelia-i18n';

export class App {
   static inject = [I18N];
	
   constructor(i18n) {
      this.i18n = i18n;
      this.i18n
      .setLocale('de-DE')
		
      .then( () => {
         console.log('Locale is ready!');
      });
   }
}

步驟 6 - 檢視

有幾種方法可以翻譯資料。我們將使用名為t的自定義ValueConverter。您可以在以下示例中看到各種格式化資料的方法。將其與translation.json檔案進行比較，您將注意到用於格式化的模式。

<template>
   <p>
      Translation with Variables: <br />
      ${ 'score' | t: {'score': 13}}
   </p>

   <p>
      Translation singular: <br />
      ${ 'lives' | t: { 'count': 1 } }
   </p>

   <p>
      Translation plural: <br />
      ${ 'lives' | t: { 'count': 2 } }
   </p>

   <p>  
      Translation singular indefinite: <br />
      ${ 'lives' | t: { 'count': 1, indefinite_article: true  } }
   </p>

   <p>
      Translation plural indefinite: <br />
      ${ 'lives' | t: { 'count': 2, indefinite_article: true } }
   </p>

   <p>
      Translation without/with context: <br />
      ${ 'friend' | t } <br />
      ${ 'friend' | t: { context: 'male' } } <br />
      ${ 'friend' | t: { context: 'female' } }
   </p>
	
</template>

當我們執行應用程式時，我們將獲得以下輸出。

Aurelia - 工具

在本章中，您將學習如何設定和使用aurelia-tools。

步驟 1 - 根資料夾

讓我們建立一個根資料夾，我們將在其中儲存所有Aurelia應用程式。

C:\Users\username\Desktop>mkdir aurelia-projects

步驟 2 - Aurelia工具

在aurelia-projects資料夾內，我們將從github克隆aurelia-tools儲存庫。

C:\Users\username\Desktop\aurelia-projects>git clone https://github.com/aurelia/tools.git

步驟 3 - 建立新專案

要啟動一個新的Aurelia專案，建議的方法是使用其中一個aurelia-skeletons。讓我們從git克隆Aurelia skeletons。

C:\Users\username\Desktop\aurelia-projects>git clone https://github.com/aurelia/skeleton-navigation.git

我們還需要安裝包、模組和依賴項。您可以在各種skeleton應用程式之間進行選擇。我們將使用skeleton-es2016。

C:\Users\username\Desktop\aurelia-projects\skeleton-navigation\skeleton-es2016>npm install
C:\Users\username\Desktop\aurelia-projects\skeleton-navigation\skeleton-es2016>jspm install

最後，我們需要執行以下程式碼來構建開發環境。

C:\Users\username\Desktop\aurelia-projects\skeleton-navigation\skeleton-es2016>gulp build-dev-env

步驟 4 - 更新

使用以下命令更新本地儲存庫。

C:\Users\username\Desktop\aurelia-projects\skeleton-navigation\skeleton-es2016>gulp update-own-deps

步驟 5 - 拉取

我們也可以在不構建的情況下拉取Aurelia依賴項。

C:\Users\username\Desktop\aurelia-projects\skeleton-navigation\skeleton-es2016>gulp pull-dev-env

Aurelia - 打包

在本章中，您將學習如何在Aurelia框架中使用捆綁。

步驟 1 - 安裝先決條件

您可以透過在命令提示符中執行以下命令來安裝aurelia-bundler。

C:\Users\username\Desktop\aureliaApp>npm install aurelia-bundler --save-dev

如果您沒有安裝gulp，則可以透過執行此程式碼來安裝它。

C:\Users\username\Desktop\aureliaApp>npm install gulp

您還可以從npm安裝require-dir包。

C:\Users\username\Desktop\aureliaApp>npm install require-dir

步驟 2 - 建立資料夾和檔案

首先，在應用程式根目錄中建立gulpfile.js檔案。

C:\Users\username\Desktop\aureliaApp>touch gulpfile.js

您將需要build資料夾。在此目錄中，新增另一個名為tasks的資料夾。

C:\Users\username\Desktop\aureliaApp>mkdir build
C:\Users\username\Desktop\aureliaApp\build>mkdir tasks

您需要在tasks資料夾內建立bundle.js檔案。

C:\Users\username\Desktop\aureliaApp\build\tasks>touch bundle.js

步驟 3 - Gulp

使用gulp作為任務執行器。您需要告訴它執行build\tasks\bundle.js中的程式碼。

gulpfile.js

require('require-dir')('build/tasks');

現在，建立您需要的任務。此任務將獲取應用程式，建立dist/appbuild.js和dist/vendor-build.js檔案。捆綁過程完成後，config.js檔案也將更新。您可以包含所有想要注入和壓縮的檔案和外掛。

bundle.js

var gulp = require('gulp');
var bundle = require('aurelia-bundler').bundle;

var config = {
   force: true,
   baseURL: '.',
   configPath: './config.js',
	
   bundles: {
      "dist/app-build": {
         includes: [
            '[*.js]',
            '*.html!text',
            '*.css!text',
         ],
         options: {
            inject: true,
            minify: true
         }
      },
		"dist/vendor-build": {
         includes: [
            'aurelia-bootstrapper',
            'aurelia-fetch-client',
            'aurelia-router',
            'aurelia-animator-css',
         ],
         options: {
            inject: true,
            minify: true
         }
      }
   }
};

gulp.task('bundle', function() {
   return bundle(config);
});

命令提示符將在捆綁完成後通知我們。

Aurelia - 除錯

在本章中，您將學習如何將Aurelia上下文偵錯程式新增為Chrome擴充套件程式。

注意 - 在新增擴充套件程式之前，您需要擁有aurelia-tools檔案。如果您沒有它，可以檢視工具章節。

步驟 1 - 開啟Chrome擴充套件程式

開啟Chrome擴充套件程式最簡單的方法是在瀏覽器的URL欄中執行以下程式碼。

chrome://extensions

步驟 2 - 新增擴充套件程式

由於此擴充套件程式尚未從Chrome網上應用店提供，請選中開發者模式複選框並點選載入未打包的擴充套件程式。這將開啟一個小視窗，您可以在其中選擇要新增的擴充套件程式。

對於此示例，讓我們選擇Desktop/aurelia-projects/tools/context-debugger資料夾並開啟它。

現在，我們可以看到擴充套件程式已載入到瀏覽器中。

我們還可以檢查開發者控制檯。當我們點選元素選項卡時，我們將在右下角看到aurelia-properties。

Aurelia - 社群

在選擇框架時，社群是最重要的因素之一。Aurelia為其客戶提供了極好的支援。在本章中，您將學習在遇到問題時如何獲得幫助。

Aurelia - 官方文件

您可以在此連結上找到Aurelia文件 - https://aurelia.io/docs.html

Aurelia Gitter - 頻道

如果您需要快速解答，您可以隨時向aurelia gitter頻道提交問題。此頻道可以在以下連結中找到 - https://gitter.im/Aurelia/Discuss

Aurelia - Github

您也可以向官方Aurelia github儲存庫提交問題 https://github.com/aurelia

Aurelia - 部落格

如果您想了解 Aurelia 的任何更新和更改，可以關注 Durandal 的官方部落格 http://blog.durandal.io/

Aurelia - Rob Eisenberg 部落格

您還可以關注 Aurelia 框架建立者 Rob Eisenberg 的官方部落格 http://eisenbergeffect.bluespire.com/

Aurelia - 企業支援

Aurelia 為團隊和個人提供企業支援。如果您有興趣，請傳送電子郵件到以下地址：

support@durandal.io

Aurelia - 聘用開發團隊

您可以透過傳送電子郵件到此地址聘用 Aurelia 專家開發人員。

consulting@durandal.io

Aurelia - 培訓

如果您想為您的團隊提供 Aurelia 官方培訓，可以傳送電子郵件到此地址。

training@durandal.io

Aurelia - 最佳實踐

Aurelia 是一個新的框架，因此最佳實踐尚未建立。在本章中，您將找到一些有用的指導方針。

啟動新專案

Aurelia 提供了 **aurelia-skeletons**。您可以從幾個框架骨架中進行選擇。Aurelia 背後的團隊積極支援這些骨架，並且它們始終與框架的最新版本保持同步。

Aurelia 骨架

**skeleton-es2016-webpack** 允許您編寫 **ES2016** 程式碼並使用 **npm** 進行包管理以及使用 **webpack** 進行打包。
**skeleton-es2016** 允許您編寫 **ES2016** 程式碼並使用 **jspm** 進行包管理以及使用 **SystemJS** 進行載入和打包。
**skeleton-typescript-webpack** 允許您編寫 **TypeScript** 程式碼並使用 **npm** 進行包管理以及使用 **webpack** 進行打包。
**skeleton-typescript** 允許您編寫 **TypeScript** 程式碼並使用 **jspm** 進行包管理以及使用 **SystemJS** 進行載入和打包。
**skeleton-typescript-asp.net5** 允許您編寫 **TypeScript** 程式碼並使用 **jspm** 進行包管理以及使用 **SystemJS** 進行載入和打包。**ASP.NET** 後端也已整合。
**skeleton-es2016-asp.net5** 允許您編寫 **ES2016** 程式碼並使用 **jspm** 進行包管理以及使用 **SystemJS** 進行載入和打包。**ASP.NET** 後端也已整合。

您可以從 **GitHub** 克隆所有骨架。安裝說明可以在每個骨架的 **README.md** 檔案中找到。

C:\Users\username\Desktop>git clone https://github.com/aurelia/skeleton-navigation.git

資料夾結構

您可以自由使用任何資料夾結構。如果您不確定從哪裡開始，可以使用以下資料夾結構。該圖片表示 **src** 目錄中的檔案和資料夾。

Web 標準

Aurelia 是一個面向 Web 標準的框架。這是其背後團隊的主要目標之一。他們將確保框架始終遵循現代 Web。這對開發人員來說非常有利，因為我們可以在將來依賴框架的可用性。它還有助於我們瞭解瀏覽器和 Web 的最新動態。

EcmaScript 6

這不僅對於 Aurelia 而且對於任何其他 JavaScript 框架來說都是一個好的實踐。**ES6** 提供了可以幫助開發過程的新功能。如果您喜歡強型別語言，也可以使用 **TypeScript**。

列印頁面