本篇内容翻译自《Beginning Backbone.js》,原著作者James Sugrue。转载请注明相关信息。
本文内容接上篇博客内容
Model属性
鉴于数据是创建一个模型的主要原因,现在让我们首先来关注属性。这部分内容涵盖了你在使用Backbone.Model时所有与属性相关的操作。
获取属性值
任何模型对象中的属性可以通过向.get方法传入所需读取的属性名简单地获取。因为我们使用的是简单的默认值,在初始化Book对象后,下面这行代码将输出“Book Title”。
console.log(myBook.get('name'));
在对象创建过程中,可以向模型中的属性传值,这样可以让每一个实例对不一样。
var thisBook = new Book({ name: 'Beginning Backbone', author: 'James Sugrue' });
现在读取两个属性中的任何一个属性值时,创建时传入的值将替代默认值。
console.log(thisBook.get('name') + ' by ' + thisBook.get('author'));
你还可以通过使用.attributes属性以JSON对象的形式来读取模型中的所有数据。
console.log(thisBook.attributes); //以JSON的形式表示所有属性
修改属性值
在构造函数外修改属性值可以通过类似的方法,通过函数调用的方式,函数格式为.set('<变量名>', <值>)。如,修改书的name属性,可以用:
thisBook.set('name', 'Beginning Backbone.js');
还可以用上面的方式向对象中添加新的属性。
thisBook.set('year', 2013); //创建一个新的名为year的属性
删除属性
有时你想删除模型中一些没用的属性。下面这个例子中,将新增一个属性随后将其删除。第二个console.log语句将得到属性返回值undefined的结果。
thisBook.set('year', 2013); console.log('Book year ' + thisBook.get('year')); thisBook.unset('year'); console.log('Book year ' + thisBook.get('year'));
Backbone提供一种简洁的方式来检查模型中是否包含某个属性,使用.has方法,该方法返回布尔值。
//检查某个属性是否存在 var hasYear = thisBook.has('year'); //结果是false var hasName = thisBook.has('name'); //结果是true console.log('Has an attribute called year : ' + hasYear); console.log('Has an attribute called name : ' + hasName);
还可以通过使用clear方法删除模型中的所有属性。
//创建一个对象 var newBook = new Book({ name: 'Another Book', author: 'You' }); newBook.clear(); //删除所有属性 console.log('Has an attribute called name : ' + newBook.has('name')); //结果是false
unset和clear方法还可以接受一个额外的options参数对象,可以将其设置成布尔值,用以表明操作完成时是否触发模型的change事件。在本章后续的“模型事件”部分将解释这些事件的原理。
thisBook.unset('year', {silent: true});
克隆模型
通常你会想复制一份Backbone模型,并且保持所有同样的属性。不用担心怎样创建深度复制的细节,你只需简单地使用.clone方法便可创建一个克隆的模型实例。
var clonedBook = thisBook.clone();
相关推荐
3. **集合(Collections)**:集合是模型的有序列表,它们继承自Backbone.Events,因此可以触发和监听事件。集合有自己的URL,可以进行同步操作,如`fetch`和`create`。集合中的模型可以通过比较ID来保持唯一性。 4...
Backbone.js 建立在 jQuery 和 Underscore.js 之上,因此它可以无缝集成到已经使用这些库的项目中。此外,它还支持通过 RESTful JSON 接口与服务器通信,使得前后端之间的数据交换更加高效。 #### 二、通过 Hello...
在Backbone.js中,集合(Collections)是模型(Models)的有序集合,它们提供了一种组织和操作数据的高效方式。在本文中,我们将深入探讨Backbone.js集合的各个方面,包括其核心概念、功能、API以及在实际开发中的...
Backbone.js框架相对轻量级,它的核心在于模型(Models)、视图(Views)、集合(Collections)和路由(Routers)。本篇文章重点讲解Backbone.js框架中的View视图组件。 Backbone.js的View视图是一个非常重要的部分...
3. **消息传递模式**:在Backbone.Radio中,消息传递模式通过`Radio.channel`来实现。开发者可以创建频道,发布和监听消息,从而实现组件间的解耦通信。 4. **频道(Channel)**:Backbone.Radio的核心是频道概念,...
通过Model,Backbone实现了数据和视图之间的同步,当Model数据发生变化时,与之关联的视图会自动更新,保持数据的即时显示。 2. Collections(集合):Collection用于存储一组Model,提供了添加、移除、排序、过滤...
它通过提供模型(Models)、视图(Views)、集合(Collections)和路由器(Routers)等概念,帮助开发者实现数据与用户界面的双向绑定,以及更好的组织前端代码。在"用Backbone.js写的增删改查列表"这个项目中,我们...
1. **Backbone.js框架**:Backbone.js提供了一套组织前端代码的工具,包括模型(Models)、视图(Views)、集合(Collections)以及路由器(Router)。它依赖于jQuery或Zepto库,用于DOM操作。 2. **模型-视图-控制...
Backbone.js是一个轻量级的JavaScript库,它提供了一种结构化的方式来组织前端应用,尤其适合构建复杂的单页面应用程序(SPA)。在这个“Backbone.js实现的俄罗斯方块游戏源码”中,我们可以深入理解如何利用...
Backbone 为复杂Javascript应用程序提供模型(models)、集合(collections)、视图(views)的结构。其中模型用于绑定键值数据和自定义事件;集合附有可枚举函数的丰富API; 视图可以声明事件处理函数,并通过RESTful ...
Backbone.js是一个轻量级的JavaScript库,它为构建结构化的Web应用提供了基础框架,包括模型(Models)、视图(Views)、集合(Collections)和路由器(Router)。在这个实例中,我们将看到如何整合Backbone.js与...
5. **vendor/**: 第三方库和插件存放的地方。 6. **javascripts/**: Backone.js的源码和应用特定的JavaScript文件。 【kanban github】表明这个项目是在GitHub上开源的,你可以在那里找到项目的完整源代码、问题...
【标题】"前端项目-backbone.collectionView.zip"是一个与前端开发相关的资源包,主要涉及的技术是Backbone.js的CollectionView。在Web开发中,前端框架扮演着至关重要的角色,它们帮助开发者组织代码,提高效率,...
7. **JavaScript 文件夹**: 存放所有与Backbone.js相关的代码,如模型、视图、集合、路由器的定义。 **三、开发流程** 1. **初始化应用**:在`index.html`中引入Backbone.js及相关库,如jQuery和Underscore.js,...
Backbone.js是一个轻量级的JavaScript框架,主要提供了三大组件:models(模型)、collections(集合)和views(视图)。通过这三个组件,可以快速构建复杂的Web应用程序。 Models(模型) Backbone.Model是...
在Backbone.js中,View是用来呈现模型数据的部分,同时也是与用户交互的关键组件。View负责监听事件并对这些事件做出响应,同时还能渲染数据到DOM中。理解View的用途和工作原理对于开发高质量的应用程序至关重要。 ...
Backbone.js是一个轻量级的JavaScript库,它为开发者提供了模型(Models)、视图(Views)、集合(Collections)和路由器(Router)等核心概念,帮助组织前端代码结构,提高可维护性和复用性。Backbone.Projections...
Backbone.js是一个轻量级的JavaScript库,它为构建大型、复杂的Web应用程序提供了一种结构化的方法。这个压缩包文件包含两本关于Backbone.js的重要书籍:《Mastering Backbone.js》(PACKT, 2015)和《Developing ...