Backbone.js Wine Cellar 教程 – 第一部分:入门
2012-11-16 13:48
459 查看
原文地址:http://www.189works.com/article-74541-1.html
要查看第一部分的工作版本(应用程序只读版本),请单击此处。
backbone.js 的代码如下所示。我建议您从我的源代码管理网站下载代码以进行深入了解。此应用程序的链接位于本教程的要求部分。
图 2. backbone.js 代码。
要查看第一部分的工作版本(应用程序只读版本),请单击此处。
backbone.js 的代码如下所示。我建议您从我的源代码管理网站下载代码以进行深入了解。此应用程序的链接位于本教程的要求部分。
图 2. backbone.js 代码。
代码重点:
WineModel(第 2 行):请注意,该代码没有明确定义属性(名称、国家/地区、年份等)。您可以添加验证、默认值,以此类推。在第二部分:CRUD 中了解更多信息。
WineCollection(第 4 行至第 7 行):“模型”表示集合的性质。“url”提供 RESTFul API 的终端。这就是需要使用 Backbone 的简单模型 API 检索、创建、更新及删除葡萄酒所需的全部组件。
WineListView(第 10 行至第 25 行):render() 函数循环访问集合,实例化集合中的每种葡萄酒的 WineListItemView,并将其添加至 wineList。
WineListItemView(第 27 行至第 38 行):render() 函数将模型数据合并至 wine-list-item 模板(在 index.html 中进行定义)。通过定义单独的列表项视图,您将能够在支持模型发生更改时轻松更新特定的列表项,而无需重新呈现整个列表。请在第二部分:CRUD 中查看有关该内容的更多信息。
WineView(第 40 行至第 49 行):该视图用于显示葡萄酒表单中的葡萄酒详细信息。render() 函数将模型数据(某款特定的葡萄酒)合并至从 index.html 检索而来的 wine-details 模板。
AppRouter(第 52 行至第 71 行):此代码通过一组(深层链接)URL 为应用程序提供入口点。定义了以下两个路由:默认路由 (“”) 显示葡萄酒列表。“wines/:id”路由显示葡萄酒表单中的某款特定葡萄酒的详细信息。请注意,在第一部分中,此路由不可进行深层链接。您必须使用默认路由启动该应用程序,然后选择某款特定的葡萄酒。在第三部分:深层链接和应用程序状态中,确保您能够深层链接至特定的葡萄酒。
相关文章推荐
- BackBone.js入门教程
- Backbone.js Wine Cellar 教程 – 第二部分:CRUD
- Backbone.js 简易入门教程
- Backbone.js Wine Cellar 教程
- Backbone.js入门教程第二版笔记(3)
- Backbonejs入门教程第二版电子书
- Backbone.js 简易入门教程
- backbone.js入门教程PDF下载
- Backbone.js入门教程第二版笔记(1)
- Backbone.js入门教程第二版笔记(2)
- Backbone.js-入门教程
- js教程--从入门到精通
- 【入门必备】最佳的 Node.js 学习教程和资料书籍
- THREE.JS入门教程(3)着色器-下
- ReactiveCocoa入门教程:第一部分
- IT营最新Node.js入门到实战项目视频教程免费下载
- BackboneJS入门学习[01]---预热
- 一看就懂的ReactJs入门教程(精华版)
- require.js入门教程
- 以太坊DApp开发入门教程——Node.js和truffle框架打造区块链投票系统