# 數據點 - 再探 JavaScript 數據綁定（現在使用 Aurelia） 作者?[Julie Lerman](https://msdn.microsoft.com/zh-cn/magazine/mt149362?author=Julie+Lerman)?| September 2015 | 獲取代碼：?[C#](http://download.microsoft.com/download/F/A/B/FABA846E-7E6A-499F-AC79-931F1E4EACA3/Code_Lerman.DataPoints.0915.zip)[VB](http://download.microsoft.com/download/F/A/B/FABA846E-7E6A-499F-AC79-931F1E4EACA3/VBCode_Lerman.DataPoints.0915.zip)  我對前端開發者的工作從來都不太感興趣，但時不時會去研究下 UI。我在看到 Knockout.js 上的用戶組呈現后，便進行了深入研究，并在我的 2012 年 6 月專欄中，撰寫了一篇有關在網站中使用 Knockout 實現 OData 數據綁定的文章 ([msdn.microsoft.com/magazine/jj133816](https://msdn.microsoft.com/magazine/jj133816))。幾個月后，我撰寫了有關如何將 Breeze.js 添加到組合中，以簡化通過 Knockout.js 實現的數據綁定的文章 ([msdn.microsoft.com/magazine/jj863129](https://msdn.microsoft.com/magazine/jj863129))。我在 2014 年撰寫了有關如何現代化舊的 ASP.NET 2.0 Web 窗體應用并再次使用 Knockout 的文章，有些朋友取笑我說，Knockout 都是“2012 年的東西了”。 Angular 等較新的框架也可以執行數據綁定及更多任務。但我對“執行更多任務”并不感興趣，Knockout 足矣。 那么，現在是 2015 年了，盡管對于 JavaScript 數據綁定而言，Knockout 依舊有效、相關且精彩絕倫，但我花了一些時間來研究這些新框架中的一種，并選擇了 Aurelia ([Aurelia.io](http://aurelia.io/))，因為我知道有許多 Web 開發者對 Aurelia 很感興趣。Aurelia 最先由 Rob Eisenberg 推出，他是另一個 JavaScript 客戶端框架 Durandal 的締造者，不過他停止了對 Durandal 的研究，轉而去了 Google 的 Angular 團隊。最終，他離開了 Angular 并選擇從頭開始創建 Aurelia，而不是振興 Durandal。關于 Aurelia，有許多有趣的事情。雖然我還有很多東西要學習（這是當然），但我想與大家分享一些我知道的數據綁定訣竅，以及 EcmaScript 6 (ES6)（JavaScript 的最新版本，并于 2015 年 6 月成為標準）的一點使用技巧。 ## 用于向我的網站提供數據的 ASP.NET Web API 我使用的是自己構建的 ASP.NET Web API，以便公開我使用 Entity Framework 6 持久保存的數據。此 Web API 包含幾個可通過 HTTP 調用的簡單方法。 Get 方法（如圖 1?所示）會接收一些查詢和分頁參數，并將這些傳遞到存儲庫方法，此方法使用 Entity Framework DbContext 檢索 Ninja 對象及其相關 Clan 對象的列表。在 Get 方法收到結果后，它會將這些結果轉換成一組在其他位置定義的 ViewListNinja 數據傳輸對象 (DTO)。這是重要的一步，因為 JSON 的序列化方式包含從 Clan 回到其他 Ninjas 的循環引用，這顯得有點過度操作。借助 DTO，我可以避免浪費網絡數據傳輸量，并能生成更符合客戶端最新動態的結果。 圖 1：Web API 中的 Get 方法 ~~~ public IEnumerable<ViewListNinja> Get(string query = "", ? int page = 0, int pageSize = 20) ? { ??? var ninjas = _repo.GetQueryableNinjasWithClan(query, page, pageSize); ??? return ninjas.Select(n => new ViewListNinja ????????????????????????????? { ??????????????????????????????? ClanName = n.Clan.ClanName, ??????????????????????????????? DateOfBirth = n.DateOfBirth, ??????????????????????????????? Id = n.Id, ??????????????????????????????? Name = n.Name, ??????????????????????????????? ServedInOniwaban = n.ServedInOniwaban ???????????? ?????????????????}); ??? } ~~~ 圖 2?展示了此方法根據檢索了兩個 Ninja 對象的查詢生成的 JSON 結果視圖。  圖 2：通過 Web API 的 Ninjas 列表請求生成的 JSON 結果 ## 使用 Aurelia 框架查詢 Web API Aurelia 范例將一個視圖模型（JavaScript 類）與一個視圖（HTML 文件）配對，并在二者之間執行數據綁定。因此，我準備了 ninjas.js 文件和 ninjas.html 文件。Ninjas 視圖模型的定義為擁有 Ninjas 數組和 Ninja 對象： ~~~ export class Ninja { ? searchEntry = ''; ? ninjas = []; ? ninjaId = ''; ? ninja = ''; ? currentPage = 1; ? textShowAll = 'Show All'; ? constructor(http) { ??? this.http = http; ? } ~~~ ninjas.js 中最關鍵的方法是 retrieveNinjas，它可調用 Web API： ~~~ retrieveNinjas() { ? return this.http.createRequest( ??? "/ninjas/?page=" + this.currentPage + ??? "&pageSize=100&query=" + this.searchEntry) ??? .asGet().send().then(response => { ????? this.ninjas = response.content; ??? }); ? } ~~~ 在 Web 應用中的其他地方，我設置了基 URL，以供 Aurelia 查找并合并到請求的 URL 中： ~~~ x.withBaseUrl('http://localhost:46534/api'); ~~~ 值得注意的是，ninjas.js 文件只是 JavaScript。如果您已經使用過 Knockout，您可能記得，您需要使用 Knockout 表示法設置視圖模型，以便當對象綁定到標記時，Knockout 將知道該如何處理此對象。不過，這并不適用于 Aurelia。 響應現在包括 Ninjas 列表，我將其設置為我的視圖模型的 ninjas 數組，它會返回至觸發相應請求的 ninjas.html 頁面。用于標識模型的標記中沒有任何內容，由于模型與 HTML 配對，因此受到關注。事實上，網頁的大部分內容包含的是標準 HTML 和一些 JavaScript，只有少量特殊命令可供 Aurelia 查找和處理。 ## 數據綁定、字符串內插和格式設置 ninjas.html 的最有意思的部分是 div，它用于顯示 ninjas 列表： ~~~ <div class="row"> ? <div? repeat.for="ninja of ninjas"> ??? <a href="#/ninjas/${ninja.Id}" class="btn btn-default btn-sm" > ????? <span class="glyphicon glyphicon-pencil" />? </a> ??? <a click.delegate="$parent.deleteView(ninja)" class="btn btn-default btn-sm"> ????? <span class="glyphicon glyphicon-trash" />? </a> ??? ${ninja.Name}? ${ninja.ServedInOniwaban ? '[Oniwaban]':''} ??? Birthdate:${ninja.DateOfBirth | dateFormat} ? </div> </div> ~~~ 此代碼中的第一個 Aurelia 標記是 repeat.for"ninja of ninjas"，其遵循 ES6 范例進行循環。由于 Aurelia 包括視圖模型，因此它知曉“ninjas”是定義為數組的屬性。可以對變量“ninja”進行任意命名，例如“foo”。 它只是表示 ninjas 數組中的每一項。現在，這只關乎遍歷 ninjas 數組中的項。向下跳至顯示這些屬性的標記，例如“${ninja.Name}”。 這是 Aurelia 利用的 ES6 功能，稱為字符串內插。字符串內插通過將變量嵌入其中（而不是通過其他方式，例如，連接），讓字符串的編寫變得更加容易。因此，對于變量名稱“Julie”，我可以用 JavaScript 進行編寫： ~~~ `Hi, ${name}!` ~~~ 它會作為“Hi, Julie!”得到處理。 Aurelia 會利用 ES6 字符串內插，并在遇到相應語法時推斷單向數據綁定。因此，以 ${ninja.Name} 開頭的最后一行代碼將輸出 ninja 屬性，以及 HTML 文本的其余部分。如果您是用 C# 或 Visual Basic 編寫代碼，請注意，字符串內插是 C# 6.0 和 Visual Basic 14 的新功能。 在此期間，我確實要多了解一點 JavaScript 語法，例如，ServedInOniwaban 布爾的條件評估，它具有與 C# 相同的語法 (condition? true : false)。 我應用到 DateOfBirth 屬性的日期格式是另一項 Aurelia 功能，如果您使用的是 XAML，則可能會感到熟悉。Aurelia 使用值轉換器。我喜歡使用目前的 JavaScript 庫來幫助完成日期和時間格式設置，并在 date-format.js 類中利用這一功能： ~~~ import moment from 'moment'; export class dateFormatValueConverter { ? toView(value) { ? return moment(value).format('M/D/YYYY'); ? } } ~~~ 請注意，在類名稱中，您確實需要使用“ValueConverter”。 在 HTML 頁面的頂部（在初始 元素的正下方），我對相應文件進行了引用： ~~~ <template> ? <require from="./date-format"></require> ~~~ 現在，字符串內插能夠在我的標記中找到 dateFormat-[ValueConverter]，并將它應用于輸出，如圖 3?所示。  圖 3：顯示所有 Ninjas，其中包含通過字符串內插由 Aurelia 實現單向綁定的屬性 我想指出的是 div 中的另一個綁定實例，但它是事件綁定，而不是數據綁定。請注意，在第一個超鏈接標記中，我使用了常見語法，同時在 href 特性中嵌入了 URL。不過，在第二個標記中，我沒有使用 href。相反，我使用了 click.delegate。雖然 Delegate 不是新命令，但 Aurelia 卻按特殊方式對其進行處理，這種方式要比標準的 onclick 事件處理程序強大得多。若要了解詳情，請訪問?[bit.ly/1Jvj38Z](http://bit.ly/1Jvj38Z)。我將繼續側重介紹與數據相關的綁定。 編輯圖標會將您引導至包含 ninja 的 ID 的 URL。我已經指示 Aurelia 路由機制路由至 Edit.html 網頁。這與 Edit.js 類中的視圖模型綁定。 Edit.js 的最關鍵方法用于檢索和保存選定的 ninja。讓我們從 retrieveNinja 開始： ~~~ retrieveNinja(id) { ? return this.http.createRequest("/ninjas/" + id) ??? .asGet().send().then(response => { ????? this.ninja = response.content; ??? }); ? } ~~~ 和先前一樣，這會生成對我的 Web API 的類似請求，但這一次請求中追加有 ID。 在 ninjas.js 類中，我將結果綁定至我的視圖模型的 ninjas 數組屬性。此時，我要將這些結果（單個對象）設置為當前視圖模型的 ninja 屬性。 下面是由于追加到 URI 的 ID 而會被調用的 Web API 方法： ~~~ public Ninja Get(int id) ? { ??? return _repo.GetNinjaWithEquipmentAndClan(id); ? } ~~~ 此方法生成的結果要比針對 ninja 列表返回的結果豐富得多。圖 4?展示了通過其中一個請求返回的 JSON。  圖 4：一個 Ninja 的 WebAPI 請求的 JSON 結果 在我將這些結果推送到我的視圖模型中之后，我便可以將 ninja 的屬性綁定至 HTML 頁面中的元素。這次，我使用的是 .bind 命令。Aurelia 將推斷是應該單向綁定，還是雙向綁定，亦或是通過其他某種方式綁定。實際上，如您在 ninjas.html 中所見，它會在發現字符串內插時使用其基礎綁定工作流。在這種情況下，它使用了一次性單向綁定。此時，因為我使用的是 .bind 命令并將綁定至輸入元素，所以 Aurelia 推斷我需要的是雙向綁定。這是它的默認選擇，我可以使用 .one-way 或其他命令來替代 .bind 命令，以此來覆蓋此選項。 為了簡潔起見，我將只提取相關的標記，而不包括四周的元素。 下面是一個輸入元素，它綁定到了模型中 ninja 屬性的 Name 屬性，該模型是我從 modelview 類傳回的： ~~~ <input value.bind="ninja.Name" /> ~~~ 下面是另一個輸入元素，這一次它綁定到了 DateOfBirth 字段。我希望能利用我之前學到的語法，輕松地重復使用日期格式值轉換器，即使是在這樣的上下文中： ~~~ <input? value.bind="ninja.DateOfBirth | dateFormat"? /> ~~~ 我還想在同一網頁上列出設備（方法類似于我是如何列出 ninjas 的），以便可以對其進行編輯和刪除。為了方便本文演示，我甚至將此列表顯示為字符串，但我尚未實現編輯和刪除功能，也并未實現設備添加功能： ~~~ <div repeat.for="equip of ninja.EquipmentOwned"> ? ${equip.Name} ${equip.Type} </div> ~~~ 圖 5?展示了具有數據綁定的窗體。  圖 5：顯示設備列表的編輯頁面 Aurelia 還具有一項名為自適應綁定的功能，可允許其根據瀏覽器的功能或傳入的對象調整綁定功能。這個設計太酷了，即便瀏覽器和庫隨著時間的推移而不斷演進，它也始終可以與二者配合使用。有關自適應綁定的詳細信息，請訪問?[bit.ly/1GhDCDB](http://bit.ly/1GhDCDB)。 目前，您只能編輯 ninja 名稱、出生日期和 Oniwaban 指示器。當用戶取消選中“在 Oniwaban 中提供”并單擊“保存”按鈕后，此操作會調用我的視圖模型的 save 方法。在我將數據推送回我的 Web API 之前，此方法會執行些有趣的操作。目前，如您在圖 4?中所見，ninja 對象是一個深層圖形。我無需發送回所有內容進行保存，只需發送回相關屬性。由于我在另一端使用的是 EF，因此我想確保我沒有編輯的屬性也會返回，以便其不會被數據庫中的 null 值取代。所以，我要創建一個名為 ninjaRoot 的動態 DTO。我已經將 ninjaRoot 聲明為我的視圖模型的屬性。不過，ninjaRoot 的定義將通過我在 Save 方法中生成它的方式予以表明（見圖 6）。我一直很小心地使用我的 WebAPI 預期的相同屬性名稱和大小寫，以便其可以將這些內容反序列化為 API 中的已知 Ninja 類型。 圖 6：編輯模型視圖中的 Save 方法 ~~~ save() { ??????? this.ninjaRoot = { ????????? Id: this.ninja.Id, ????????? ServedInOniwaban: this.ninja.ServedInOniwaban, ????????? ClanId: this.ninja.ClanId, ????????? Name: this.ninja.Name, ????????? DateOfBirth: this.ninja.DateOfBirth, ????????? DateCreated: this.ninja.DateCreated, ????????? DateModified: this.ninja.DateModified ??????? }; ??????? this.http.createRequest("/ninjas/") ????????? .asPost() ????????? .withHeader('Content-Type', 'application/json; charset=utf-8') ????????? .withContent(this.ninjaRoot).send() ????????? .then(response => { ?????? ?????this.myRouter.navigate('ninjas'); ????????? }).catch(err => { ??????????? console.log(err); ????????? }); ??? } ~~~ 請注意此調用中的“asPost”方法。這可確保將請求轉到我的 Web API 中的 Post 方法： ~~~ public void Post([FromBody] object ninja) { ? var asNinja = ??? JsonConvert.DeserializeObject<Ninja> ??? (ninja.ToString()); ? _repo.SaveUpdatedNinja(asNinja); } ~~~ JSON 對象反序列化為本地 Ninja 對象，然后傳遞給我的存儲庫方法，此方法知道對數據庫中的這一對象進行更新。 當我在我的網站上返回到 Ninjas 列表后，更改也會反映在輸出中。 ## 不僅僅是數據綁定 請注意，Aurelia 是一個功能更加豐富的框架（不僅僅只有數據綁定），但出于我的本性，我在探究此工具的初期階段將重點放在了數據上。您可以通過 Aurelia 網站了解到更多信息，而[gitter.im/Aurelia/Discuss](http://gitter.im/Aurelia/Discuss)?則是一個活躍的社區。 我要衷心感謝 tutaurelia.net 網站，上面的系列博客探討了如何將 ASP.NET Web API 和 Aurelia 結合使用。依賴于作者 Bart Van Hoey 的第 6 部分，我第一次顯示了 ninjas 列表。可能在本文發表時，這一系列中會新增更多博文。 本文的下載內容包括 Web API 解決方案和 Aurelia 網站。您可以在 Visual Studio 中使用 Web API 解決方案。我已使用 Entity Framework 6 和 Microsoft .NET Framework 4.6 在 Visual Studio 2015 中構建了網站。如果您想運行此網站，則需要訪問?[Aurelia.io](http://aurelia.io/)?站點，了解如何安裝 Aurelia 和運行此網站。您還可以在我的 Pluralsight 課程“Entity Framework 6 入門”([bit.ly/PS EF6Start](http://bit.ly/PS-EF6Start)) 中，觀看我對此應用程序的演示。 * * * Julie Lerman?*是 Microsoft MVP、.NET 導師和顧問，住在佛蒙特州的山區。您可以在全球的用戶組和會議中看到她對數據訪問和其他 .NET 主題的演示。她是《Programming Entity Framework》(2010) 以及“代碼優先”版 (2011) 和 DbContext 版 (2012)（均出自 O’Reilly Media）的作者，博客網址為[thedatafarm.com/blog](http://thedatafarm.com/blog)。通過她的 Twitter（網址為?[twitter.com/julielerman](http://twitter.com/julielerman)）關注她，并在[juliel.me/PS-Videos](http://juliel.me/PS-Videos)?上觀看其 Pluralsight 課程。*