只读 Wine Cellar 应用程序代码演练
要查看第一部分的工作版本（应用程序只读版本），请单击此处。
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，这样您就能够了解如何向此应用程序添加更多功能。

Adobe Creative Cloud
您可以免费注册 Adobe 创意云服务。Creative Cloud 上还提供了诸多 HTML5 开发工具，包
括可以免费下载 HTML5 动画制作工具 Edge Animate，开发工具 Edge Code，移动应用测
试工具 Edge Inspect 等。
Creative Cloud 的登录地址在此：http://t.cn/zTbTLKT

 

在本教程第一部分：入门，我们安装了 Wine Cellar 应用程序的基本结构。迄今为止，该
应用程序仍为只读程序，因此只允许您检索葡萄酒列表并显示您所选择的葡萄酒详细信
息。

 

在本文的第二部分中，您将学习创建、更新及删除 (CRUD) 葡萄酒。
HTTP 方法
URL
操作
GET

                     找软件资料，就到一览软件文库

http://wk.yl1001.com/rj/