Backbone.js Wine Cellar教程–第一部分：入門

Adobe Creative Cloud

您可以免費註冊Adobe創意雲端服務。Creative Cloud上還提供了諸多HTML5開發工具，包括可以免費下載HTML5動畫製作工具Edge Animate，開發工具Edge Code，行動裝置 App測試載入器Edge Inspect等。
    Creative Cloud的登入地址在此：http://t.cn/zTbTLKT 

構建重要 Web 應用程式所面臨的其中一個挑戰是，JavaScript 的不定向特性首先可能導致代碼結構缺失，或者換句話說就是缺乏……主幹。JavaScript 通常被寫成一連串自由懸掛的無關代碼塊，要不了多久人們將很難理解自身代碼的邏輯和結構。

Backbone.js 是一個輕量級架構，它通過向具有大量 JavaScript 的 Web 應用程式添加架構有效解決了這一問題。

獨立建置組塊

Backbone.js 提供了若干類模型、集合、視圖及路由器），您可以藉此擴充定義自己的應用程式建置組塊。要使用 Backbone.js 構建應用程式，請首先建立應用程式的模型、集合和視圖。然後定義通過一組深層連結）URL 提供應用程式進入點的“路由器”來啟用這些組件。

您可以藉助 Backbone.js 組織獨立實體模型、集合和視圖）的代碼，簡單來說，獨立實體是指不再含有自由懸掛的無關代碼塊。

資料繫結

您可以藉助 Backbone.js 將視圖綁定至模型，這樣，當某個模型的資料發生更改時，綁定至該模型的所有視圖均將自動重新呈現。不再需要複雜的 UI 同步代碼。

巧妙的 REST 整合

Backbone.js 還能夠自然、神奇而又巧妙地與 RESTful 服務整合。如果您純粹通過 RESTful API 公開後端資料，則使用 Backbone.js 的簡單模型 API 執行檢索 (GET)、建立 (POST)、更新 (PUT) 及刪除 (DELETE) 模型操作將變得非常簡單。

關於 Wine Cellar 應用程式範例

本教程分為三個部分，我們將在此教程中建立 Wine Cellar 應用程式，從而讓使用者瀏覽葡萄酒列表，並添加、更新和刪除葡萄酒。

1）在本文“Backbone.js Wine Cellar 教程 — 第一部分：入門”中，您將會定義基本結構。您將為該應用程式建立一個“唯讀”版本。這樣就能檢索葡萄酒列表並擷取每種葡萄酒的詳細資料。

2）在 Backbone.js Wine Cellar 教程 — 第二部分：CRUD 教程 — 第二部分：CRUD 中，您將會添加代碼功能以添加、更新及刪除葡萄酒。您可以利用 Backbone 的強大 REST 整合功能。

3）在 Backbone.js Wine Cellar 教程 — 第三部分：深層連結和應用程式狀態中，您將增加全面的記錄管理和深層連結支援。

圖 1. Wine Cellar 應用程式

唯讀 Wine Cellar 應用程式代碼演練

要查看第一部分的工作版本應用程式唯讀版本），請單擊此處。

backbone.js 的代碼如下所示。我建議您從我的原始程式碼控制網站下載代碼以進行深入瞭解。此應用程式的連結位於本教程的要求部分。

圖 2. backbone.js 代碼。

代碼重點：

1.WineModel第 2 行）：請注意，該代碼沒有明確定義屬性名稱、省/地區、年份等）。您可以添加驗證、預設值，以此類推。在第二部分：CRUD 中瞭解更多資訊。

2.WineCollection第 4 行至第 7 行）：“模型”表示集合的性質。“url”提供 RESTFul API 的終端。這就是需要使用 Backbone 的簡單模型 API 檢索、建立、更新及刪除葡萄酒所需的全部組件。

3.WineListView第 10 行至第 25 行）：render() 函數逐一查看集合，執行個體化集合中的每種葡萄酒的 WineListItemView，並將其添加至 wineList。

4.WineListItemView第 27 行至第 38 行）：render() 函數將模型資料合併至 wine-list-item 模板在 index.html 中進行定義）。通過定義單獨的清單項目視圖，您將能夠在支援模型發生更改時輕鬆更新特定的清單項目，而無需重新呈現整個列表。請在第二部分：CRUD 中查看有關該內容的更多資訊。

5.WineView第 40 行至第 49 行）：該視圖用於顯示葡萄酒表單中的葡萄酒詳細資料。render() 函數將模型資料某款特定的葡萄酒）合并至從 index.html 檢索而來的 wine-details 模板。

6.AppRouter第 52 行至第 71 行）：此代碼通過一組深層連結）URL 為應用程式提供進入點。定義了以下兩個路由：預設路由 (“”) 顯示葡萄酒列表。“wines/:id”路由顯示葡萄酒表單中的某款特定葡萄酒的詳細資料。請注意，在第一部分中，此路由不可進行深層連結。您必須使用預設路由啟動該應用程式，然後選擇某款特定的葡萄酒。在第三部分：深層連結和應用程式狀態中，確保您能夠深層連結至特定的葡萄酒。

進一步學習

接下來，請閱讀第二部分：CRUD，這樣您就能夠瞭解如何向此應用程式添加更多功能。