Adobe Creative Cloud

您可以免費(fèi)注冊(cè)Adobe創(chuàng)意云服務(wù)。Creative Cloud上還提供了諸多HTML5開發(fā)工具，包括可以免費(fèi)下載HTML5動(dòng)畫制作工具Edge Animate，開發(fā)工具Edge Code，移動(dòng)應(yīng)用測(cè)試工具Edge Inspect等。
Creative Cloud的登錄地址在此：http://t.cn/zTbTLKT

在本教程***部分：入門，我們安裝了 Wine Cellar 應(yīng)用程序的基本結(jié)構(gòu)。迄今為止，該應(yīng)用程序仍為只讀程序，因此只允許您檢索葡萄酒列表并顯示您所選擇的葡萄酒詳細(xì)信息。

在本文的第二部分中，您將學(xué)習(xí)創(chuàng)建、更新及刪除 (CRUD) 葡萄酒。

這些服務(wù)的 PHP 版本（使用Slim 框架）均將隨下載內(nèi)容一同提供。 本文還將提供一個(gè)類似的 Java 版本的 API（使用 JAX-RS）。

搭配使用 Backbone.js 和非 RESTful 服務(wù)

如果您的持久層無法通過 RESTful 服務(wù)進(jìn)行提供，您可以替換 Backbone.sync。在本文檔中：

“Backbone.sync 是一個(gè)函數(shù)， Backbone 每次嘗試讀取模型或?qū)⑵浔４嬷练?wù)器時(shí)都會(huì)調(diào)用該函數(shù)。默認(rèn)情況下，它使用 (jQuery/Zepto).ajax 發(fā)出 RESTful JSON 請(qǐng)求。您可以替換它，以便利用不同的持久性策略，比如 WebSockets、XML 傳輸或本地存儲(chǔ)。”

我不會(huì)在本教程中討論非 RESTful 服務(wù)的使用。有關(guān)更多信息，請(qǐng)參閱文檔 。

添加創(chuàng)建、更新和刪除功能

您可以 運(yùn)行將在本教程中進(jìn)行編碼的應(yīng)用程序。此在線版本的創(chuàng)建、更新和刪除功能均已禁用。

此在線版本的創(chuàng)建、更新和刪除功能均已禁用。

圖 2. backbone.js 代碼

代碼重點(diǎn)

Wine（第 2 行至第 14 行）

第二部分向該葡萄酒模型添加了兩個(gè)屬性，如下所示：

(1)urlRoot （第 3 行）：RESTful 服務(wù)終端將檢索或保存模型數(shù)據(jù)。請(qǐng)注意，只有在檢索/保存獨(dú)立于集合的模型時(shí)才需要使用此屬性。如果該模型是集合的一部分，集合中定義的 URL 屬性足以供 Backbone.js 了解如何使用您的 RESTful API 檢索、更新或刪除數(shù)據(jù)。

(2)Defaults （第 4 行）：為模型創(chuàng)建新實(shí)例時(shí)使用的默認(rèn)值。此屬性是可選屬性。但是，此應(yīng)用程序需要使用此屬性促使 wine-details 信息模板呈現(xiàn)“空”葡萄酒模型對(duì)象（該情況將在添加新葡萄酒時(shí)發(fā)生）。

WineListView（第 22 行至第 40 行）

當(dāng)用戶添加新葡萄酒時(shí)，您希望它自動(dòng)顯示在列表中。要做到這一點(diǎn)，請(qǐng)將視圖綁定至 WineListView 模型（葡萄酒集合）的添加事件。當(dāng)事件觸發(fā)后，該應(yīng)用程序會(huì)創(chuàng)建新的 WineListItemView 實(shí)例并將其添加到該列表中。

WineListItemView（第 42 行至第 62 行）

(1)當(dāng)用戶改變葡萄酒時(shí)，您希望對(duì)應(yīng)的 WineListItemView 自動(dòng)重新呈現(xiàn)以反映這種變化。要做到這一點(diǎn)，請(qǐng)將視圖綁定至其模型的更改事件，然后在觸發(fā)事件時(shí)執(zhí)行 Render 函數(shù)。同樣，當(dāng)用戶刪除葡萄酒時(shí)，您希望自動(dòng)刪除列表項(xiàng)。

(2)要做到這一點(diǎn)，請(qǐng)將視圖綁定至其模型的破壞事件，然后在觸發(fā)事件時(shí)執(zhí)行我們的自定義 Close 函數(shù)。
重要注意事項(xiàng)： 為避免內(nèi)存泄露及事件多次觸發(fā)，重要的是先解除事件偵聽器綁定，然后再?gòu)?DOM 中刪除列表項(xiàng)。

(3)請(qǐng)注意，無論發(fā)生哪種情況，您都不用承擔(dān)重新呈現(xiàn)整個(gè)列表的費(fèi)用。您只能重新呈現(xiàn)或刪除受更改影響的列表項(xiàng)。

WineView（第 64 行至第 123 行）

本著封裝精神，Save 和 Delete 按鈕的事件處理程序均在 WineView 內(nèi)部進(jìn)行定義，這與將它們作為自由懸掛式代碼塊在“類”定義外部定義截然相反。使用 Backbone.js 事件語(yǔ)法，采用 jQuery 幕后委托機(jī)制。

您始終可以根據(jù)用戶在表單中的輸入內(nèi)容采用以下不同方法來更新模型：

(1)“實(shí)時(shí)”方法：使用更改處理程序在表單更改時(shí)更新模型。這種方法從本質(zhì)上而言是雙向數(shù)據(jù)綁定方法。模型和 UI 控件始終同步。您可以利用這種方法選擇將更改實(shí)時(shí)發(fā)送至服務(wù)器（隱式保存），還是等到用戶單擊 Save 按鈕時(shí)再發(fā)送更改（顯示保存）。***個(gè)選項(xiàng)在存在交叉字段驗(yàn)證規(guī)則時(shí)不正式也不可行。而第二個(gè)選項(xiàng)可能需要您撤銷模型更改，如果用戶在未單擊 Save 的情況下導(dǎo)航至其他項(xiàng)目的話。

(2)“延遲”方法：等到用戶單擊 Save 時(shí)再根據(jù) UI 控件的新值更新模型，然后將這些更改發(fā)送至服務(wù)器。

本討論主題并非 Backbone.js 特有，因此本文并未就此進(jìn)行探討。為簡(jiǎn)單起見，我在此處使用延遲方法。但是，我依然導(dǎo)入更改事件，并利用其記錄控制臺(tái)更改。我發(fā)現(xiàn)此方法在調(diào)試應(yīng)用程序（特別是要確保我已經(jīng)清除綁定，請(qǐng)參見 Close 函數(shù)）時(shí)非常有效。如果您發(fā)現(xiàn)更改事件觸發(fā)多次，則可能沒有相應(yīng)地清除綁定。

HeaderView（第 125 行至第 148 行）

Backbone.js 視圖通常用于呈現(xiàn)域模型（比如 WineListView、WineListItemView 及 Wine View）。但它們也可以用來創(chuàng)建復(fù)合 UI 組件。例如，在此應(yīng)用程序中，我們定義的標(biāo)頭視圖（一種工具欄）可由多個(gè)不同組件構(gòu)成，并且可以封裝其自身邏輯。

下一步閱讀方向

到目前為止，該應(yīng)用程序尚不支持深層鏈接。例如，它還不提供在列表中選擇葡萄酒、在地址欄抓取 URL 并將其粘貼至其他瀏覽器窗口等功能：這些功能尚未運(yùn)行。在 第三部分：深層鏈接和應(yīng)用程序狀態(tài)中，您將會(huì)添加全面的深層鏈接支持。