Backbone.js Wine Cellar教程–第一部分:入门

原创
移动开发 Android
构建重要 Web 应用程序所面临的其中一个挑战是,JavaScript 的不定向特性首先可能导致代码结构缺失,或者换句话说就是缺乏……主干。JavaScript 通常被写成一连串自由悬挂的无关代码块,要不了多久人们将很难理解自身代码的逻辑和结构。

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,这样您就能够了解如何向此应用程序添加更多功能。

责任编辑:闫佳明 来源: 51cto
相关推荐

2013-04-08 16:16:59

Backbone.jsCRUD

2019-04-10 11:06:54

前端HTMLCSS

2009-06-09 14:40:01

Javascript表单验证

2009-06-11 15:25:39

Java随机数

2009-06-12 10:34:40

Java Date

2013-07-08 15:45:04

Python

2009-06-12 10:08:05

StaticJava

2018-11-15 14:52:15

Spark数据机器学习

2011-08-03 10:12:38

2013-09-24 10:07:19

Ruby项目

2009-06-15 13:32:18

Java applet插件

2020-10-10 14:36:10

Python

2013-11-14 16:18:05

AndroidAudioAudioTrack

2018-12-19 09:03:04

物联网供应链物联网应用

2009-07-14 13:49:28

Swing组件AWT

2020-10-12 00:41:52

Python变量

2010-03-11 11:29:51

乔布斯

2020-10-11 23:45:55

Python解释器

2020-10-13 09:54:38

内存技术数据

2012-12-13 13:09:38

点赞
收藏

51CTO技术栈公众号