Adobe Creative Cloud

您可以免費注冊Adobe創意云服務。Creative Cloud上還提供了諸多HTML5開發工具，包括可以免費下載HTML5動畫制作工具Edge Animate，開發工具Edge Code，移動應用測試工具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，這樣您就能夠了解如何向此應用程序添加更多功能。