《开始学Backbone.js》之第三章Backbone Models与Collections(一)
2015-01-10 15:36
218 查看
Backbone.js应用的模型层由两个主要的部分组成:数据呈现(Backbone.Model)和由数据组成的集合(Backbone.Collections)。正确掌握这两部分如何工作以及交互,能让你的Backbone应用具有结构良好的数据层。
在开始之前,为了确保你的系统能够正确运行你还需要做几件事情。首先,你的所有代码应该放在一个Apache web服务器中运行,而不是简单地从文件系统中运行。在我的例子中,我将一个名字为backbone的文件夹放在了安装的XAMPP的htdocs目录下。当要访问这个服务器的index.html页面时,可以通过这个URL访问:http://localhost/backbone/index.html。
index.html页面的结构可以参照前面几个章节的例子。确保在该文件中引用了Backbone,Underscore和jQuery库,且把本章出现的所有其它JavaScript代码放在文件结尾的script标签里面。
你将注意到,在后台API调用中,我使用的是Node.js。其可以从http://nodejs.org下载,且在设置server.js文件(将在”与服务器交换数据“部分创建的)前,你应确保你本地的安装能够正确地运行。
最后,当你遇到问题时不要忘了使用Chrome开发者工具,它总是能提供了一些好的方式来定位JavaScript代码的bug。
每一个应用都以模型的定义开始。在应用中需要处理和呈现的正是数据。正如前面几章所描述的,模型就是数据所在层且常常包含很多对象。一般来说,应该将问题分解成几个单独的元素然后将它们描述成模型对象。
在Backbone中创建模型对象,需要使用Backbone.Model。后面你将发现所有你创建的Backbone对象都将使用.extend方法来创建自定义的类,如下面这段代码:
Backbone库中的所有对象都以Backbone为命名空间,这样就非常地清晰什么时候使用的是Backbone中的对象。
在实际的应用中,可能不会这样创建一个模型,而是通过传入一些属性值来正确地构建对象。在前面那个代码片段中,空的大括号({})表示的是对象字面量。模型的所有属性和方法都在这里面。
提示:对象字面量包含一系列以key: value的形式组成且由逗号分割的键值对,其中value可以是函数也可以是其他对象。
当创建新的模型对象时,在构建过程中可能需要执行一些操作,比如设置不同的处理函数或者设置一些初始状态。在Backbone中实现这些,只需在创建模型对象时定义一个initialize函数。
为了看看实战中的initialize函数我们可以创建一个简单的Book对象,其作用是在对象创建是向控制台输出一行信息。
当创建一个Model对象的新实例时这个initialize函数就会立即执行。在这个例子中,当创建一个新的Book对象时,在控制台中我们会看到一行”a new book"的内容。
模型的另一种常见需求是为其设置一些默认属性。这样做可以定义一些可选参数,而不是在对象创建传入参数。在Backbone中,可以通过使用defaults对象字面量来实现。
这样在创建对象时,这些默认的值可以提供给各个实例。
本篇内容翻译自《Beginning Backbone.js》,原著作者James
Sugrue。
系统设置
在开始之前,为了确保你的系统能够正确运行你还需要做几件事情。首先,你的所有代码应该放在一个Apache web服务器中运行,而不是简单地从文件系统中运行。在我的例子中,我将一个名字为backbone的文件夹放在了安装的XAMPP的htdocs目录下。当要访问这个服务器的index.html页面时,可以通过这个URL访问:http://localhost/backbone/index.html。index.html页面的结构可以参照前面几个章节的例子。确保在该文件中引用了Backbone,Underscore和jQuery库,且把本章出现的所有其它JavaScript代码放在文件结尾的script标签里面。
你将注意到,在后台API调用中,我使用的是Node.js。其可以从http://nodejs.org下载,且在设置server.js文件(将在”与服务器交换数据“部分创建的)前,你应确保你本地的安装能够正确地运行。
最后,当你遇到问题时不要忘了使用Chrome开发者工具,它总是能提供了一些好的方式来定位JavaScript代码的bug。
Backbone Models
每一个应用都以模型的定义开始。在应用中需要处理和呈现的正是数据。正如前面几章所描述的,模型就是数据所在层且常常包含很多对象。一般来说,应该将问题分解成几个单独的元素然后将它们描述成模型对象。在Backbone中创建模型对象,需要使用Backbone.Model。后面你将发现所有你创建的Backbone对象都将使用.extend方法来创建自定义的类,如下面这段代码:
MyModel = Backbone.Model.extend({ //这里定义对象属性 })
Backbone库中的所有对象都以Backbone为命名空间,这样就非常地清晰什么时候使用的是Backbone中的对象。
在实际的应用中,可能不会这样创建一个模型,而是通过传入一些属性值来正确地构建对象。在前面那个代码片段中,空的大括号({})表示的是对象字面量。模型的所有属性和方法都在这里面。
提示:对象字面量包含一系列以key: value的形式组成且由逗号分割的键值对,其中value可以是函数也可以是其他对象。
构造函数
当创建新的模型对象时,在构建过程中可能需要执行一些操作,比如设置不同的处理函数或者设置一些初始状态。在Backbone中实现这些,只需在创建模型对象时定义一个initialize函数。为了看看实战中的initialize函数我们可以创建一个简单的Book对象,其作用是在对象创建是向控制台输出一行信息。
Book = Backbone.Model.extend({ initialize: function(){ console.log('a new book'); } };
当创建一个Model对象的新实例时这个initialize函数就会立即执行。在这个例子中,当创建一个新的Book对象时,在控制台中我们会看到一行”a new book"的内容。
var myBook = new Book();
模型的另一种常见需求是为其设置一些默认属性。这样做可以定义一些可选参数,而不是在对象创建传入参数。在Backbone中,可以通过使用defaults对象字面量来实现。
Book = Backbone.Model.extend({ initialize: function(){ console.log('a new book'); }, defaults: { name: 'Book Title', author: 'No one' } });
这样在创建对象时,这些默认的值可以提供给各个实例。
本篇内容翻译自《Beginning Backbone.js》,原著作者James
Sugrue。
相关文章推荐
- 《开始学Backbone.js》之第三章Backbone Models与Collections(四)
- 《开始学Backbone.js》之第三章Backbone Models与Collections(六)
- 《开始学Backbone.js》之第三章Backbone Models与Collections(七)
- 《开始学Backbone.js》之第三章Backbone Models与Collections(五)
- 《开始学Backbone.js》之第三章Backbone Models与Collections(三)
- Backbone.js 为复杂Javascript应用程序提供模型(models)、集合(collections)、视图(views)的结构
- 《开始学Backbone.js》之第三章Backbone Models与Collections(二)
- Backbone.js 为复杂Javascript应用程序提供模型(models)、集合(collections)、视图(views)的结构
- backbone为复杂Javascript应用程序提供模型(models)、集合(collections)、视图(views)的结构
- Backbone.js(二)集合Collections
- js获得本周,本月,本季度的开始日期和结束日期
- js获得本周,本月,本季度的开始日期和结束日期
- Js倒计时代码,当鼠标离开页面与回到页面会自动停止与开始
- js验证开始和结束日期
- 让我们用Backbone.js来写一个HelloWorld程序。
- 蛋疼地开始学JS原型,prototype,试着写一个小小的伸缩框
- JavaScript 相关 —— 向页面写JS以alert信息、通过对地址栏赋值转到指定页、注册Js到Body的开始部分、注册Js到Body的结束位置
- JS 比较开始日期是否大于结束日期
- MVC轻量级的js库:BackBone.js
- 开始读《Data Structures and the Java Collections Framework》