BackboneJS - 快速指南
BackboneJS - Overview
BackboneJS是一个lightweight JavaScript library ，允许开发和构建在Web浏览器中运行的客户端应用程序。 它提供了MVC框架，它将数据抽象为模型，将DOM抽象为视图，并使用事件绑定这两个。
History - BackboneJS由Jeremy Ashkenas开发，最初于2010年10月13 日发布。
何时使用Backbone
考虑一下使用JavaScript或jQuery创建一个包含大量代码行的应用程序。 在这个应用程序中，如果你 -
将DOM元素添加或替换为应用程序或
提出一些要求或
在应用程序中显示动画或
在代码中添加更多行，
那你的申请可能会变得复杂。
如果您希望使用更少的代码来实现更好的设计，那么最好使用BackboneJS库来提供良好的功能，组织良好并以结构化的方式开发应用程序。
BackboneJS通过事件进行通信; 这可以确保您不会弄乱应用程序。 您的代码将更清洁，更好，更易于维护。
特点 (Features)
以下是BackboneJS的功能列表 -
BackboneJS允许使用JavaScript函数以更简单的方式开发应用程序和前端。
BackboneJS提供各种构建块，例如模型，视图，事件，路由器和集合，用于组装客户端Web应用程序。
模型更改时，它会自动更新应用程序的HTML。
BackboneJS是一个简单的库，有助于分离业务和用户界面逻辑。
它是免费的开源库，包含100多个可用扩展。
它就像是项目的主干，有助于组织代码。
它管理包含用户数据的数据模型，并在服务器端显示具有在客户端编写的相同格式的数据。
BackboneJS与jQuery具有软依赖关系，并且与Underscore.js具有硬依赖关系。
它允许以井结构化和有组织的格式创建客户端Web应用程序或移动应用程序。
BackboneJS - Environment Setup
BackboneJS非常易于设置和工作。 本章将讨论BackboneJS Library的下载和设置。
BackboneJS可以通过以下两种方式使用 -
- 从其官方网站下载UI库。
- 从CDN下载UI库。
从其官方网站下载UI库
当您打开http://backbonejs.org/链接时，您将看到如下所示的屏幕截图 -
如您所见，有三种下载此库的选项 -
Development Version - 右键单击此按钮并另存为，您将获得完整的源JavaScript library 。
Production Version - 右键单击此按钮并另存为，您将获得打包和压缩的Backbone-min.js library文件。
Edge Version - 右键单击此按钮并另存为，您将获得unreleased version ，即开发正在进行中; 因此您需要自担风险使用它。
Dependencies
BackboneJS依赖于以下JavaScript文件 -
Underscore.js - 这是唯一需要包含的硬依赖。 你可以从here得到它。
jQuery.js - 包含此文件用于RESTful持久性，通过Backbone.Router进行历史记录支持以及使用Backbone.View进行DOM操作。 你可以从here得到它。
json2.js - 包含此文件以用于较早的Internet Explorer支持。 你可以从here得到它。
从CDN下载UI库
CDN或Content Delivery Network是用于向用户提供文件的服务器网络。 如果您在网页中使用CDN链接，则会将托管文件的责任从您自己的服务器转移到一系列外部服务器。 这也提供了一个优势，如果您的网页的访问者已经从同一CDN下载了BackboneJS的副本，则不必重新下载。
如上所述，BackboneJS具有以下JavaScript的依赖关系 -
- jQuery
- Underscore
因此以上所有的CDN如下 -
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type = "text/javascript"
src = "https://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js"></script>
<script type = "text/javascript"
src = "https://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"></script>
Note - 我们在本教程中使用了库的CDN版本。
例子 (Example)
让我们使用BackboneJS创建一个简单的例子。
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<meta http-equiv = "X-UA-Compatible" content = "IE = edge,chrome = 1">
<title>Hello World using Backbone.js</title>
</head>
<body>
<!-- ========= -->
<!-- Your HTML -->
<!-- ========= -->
<div id = "container">Loading...</div>
<!-- ========= -->
<!-- Libraries -->
<!-- ========= -->
<script src = "https://code.jquery.com/jquery-2.1.3.min.js"
type = "text/javascript"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscoremin.js"
type = "text/javascript"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js"
type = "text/javascript"></script>
<!-- =============== -->
<!-- Javascript code -->
<!-- =============== -->
<script type = "text/javascript">
var AppView = Backbone.View.extend ({
// el - stands for element. Every view has an element associated with HTML content, will be rendered.
el: '#container',
// It's the first function called when this view is instantiated.
initialize: function() {
this.render();
},
// $el - it's a cached jQuery object (el), in which you can use jQuery functions to push content.
//Like the Hello IoWiki in this case.
render: function() {
this.$el.html("Hello IoWiki!!!");
}
});
var appView = new AppView();
</script>
</body>
</html>
代码注释不言自明。 下面列出了一些细节 -
在body标签的开头有一个html代码
<div id = "container">Loading...</div>
这打印Loading...
接下来，我们添加了以下CDN
<script src = "https://code.jquery.com/jquery-2.1.3.min.js"
type = "text/javascript"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min.js"
type = "text/javascript"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js"
type = "text/javascript"></script>
接下来，我们有以下脚本 -
var AppView = Backbone.View.extend ({
// el - stands for element. Every view has an element associated with HTML content,
//will be rendered.
el: '#container',
// It's the first function called when this view is instantiated.
initialize: function() {
this.render();
},
// $el - it's a cached jQuery object (el), in which you can use jQuery functions to push content.
//Like the Hello World in this case.
render: function() {
this.$el.html("<h1>Hello IoWiki!!!</h1>");
}
});
var appView = new AppView();
评论是不言自明的。 在最后一行中，我们正在初始化new AppView() 。 这将打印with id = "container"的div的“Hello IoWiki with id = "container"
将此页面另存为myFirstExample.html 。 在浏览器中打开它，屏幕将显示以下文本。
BackboneJS - Applications
BackboneJS为Web应用程序提供了一种结构，允许分离业务逻辑和用户界面逻辑。 在本章中，我们将讨论用于实现用户界面的BackboneJS应用程序的架构风格。 下图显示了BackboneJS的体系结构 -
BackboneJS的体系结构包含以下模块 -
- HTTP请求
- Router
- View
- Events
- Model
- Collection
- 数据源
现在让我们详细讨论所有模块。
HTTP请求
HTTP客户端以请求消息的形式向服务器发送HTTP请求，其中Web浏览器，搜索引擎等的行为类似于HTTP客户端。 用户使用HTTP请求协议请求诸如文档，图像等的文件。 在上图中，您可以看到HTTP客户端使用路由器发送客户端请求。
Router
它用于路由客户端应用程序，并使用URL将它们连接到操作和事件。 它是应用程序对象的URL表示形式。 该URL由用户手动更改。 URL由主干使用，以便它可以了解要向用户发送或呈现的应用程序状态。
路由器是一种可以复制URL以到达视图的机制。 当Web应用程序为应用程序中的重要位置提供可链接，可收藏且可共享的URL时，需要使用路由器。
在上述架构中，路由器向View发送HTTP请求。 当应用程序需要路由功能时，它是一个有用的功能。
View
BackboneJS视图负责从我们的应用程序中显示的方式和内容，并且它们不包含应用程序的HTML标记。 它指定了向用户呈现模型数据背后的想法。 视图用于反映“数据模型的外观”。
视图类对HTML和CSS一无所知，并且当模型更改时，每个视图都可以独立更新，而无需重新加载整个页面。 它表示DOM中UI的逻辑块。
如上面的体系结构所示，View表示用户界面，负责显示使用Router完成的用户请求的响应。
事件 (Events)
事件是任何应用程序的主要部分。 它将用户的自定义事件绑定到应用程序。 它们可以混合到任何对象中，并且能够绑定和触发自定义事件。 您可以使用所需的名称绑定自定义事件。
通常，事件与其程序流同步处理。 在上面的体系结构中，您可以看到事件发生的时间，它通过使用View来表示模型的数据。
Model
它是JavaScript应用程序的核心，可以检索和填充数据。 模型包含应用程序的数据，数据的逻辑并表示框架中的基本数据对象。
模型表示具有一些业务逻辑和业务验证的业务实体。 它们主要用于数据存储和业务逻辑。 模型可以从数据存储中检索并保存到数据存储中。 模型使用路由器从View传递的事件中获取HTTP请求，并同步数据库中的数据并将响应发送回客户端。
收藏品(Collection)
Collection是在集合中修改模型时绑定事件的一组模型。 该集合包含可在循环中处理并支持排序和过滤的模型列表。 在创建集合时，我们可以定义集合将与属性实例一起使用的模型类型。 在模型上触发的任何事件也将触发模型中的集合。
它还从视图中获取请求，绑定事件并将数据与请求的数据同步，并将响应发送回HTTP客户端。
数据源
它是从服务器设置到数据库的连接，包含从客户端请求的信息。 BackboneJS架构的流程可以描述如下步骤 -
用户使用路由器请求数据，路由器使用URL将应用程序路由到事件。
视图向用户表示模型的数据。
模型和集合通过绑定自定义事件来检索和填充数据库中的数据。
在下一章中，我们将了解BackboneJS中事件的重要性。
BackboneJS - Events
事件能够绑定对象并触发自定义事件，即您可以使用我们选择的所需名称绑定自定义事件。
下表列出了可用于操作BackboneJS-Events的所有方法 -
| S.No. | 方法和描述 |
|---|---|
| 1 | on 它将事件绑定到对象，并在触发事件时执行回调。 |
| 2 | off 它从对象中删除回调函数或所有事件。 |
| 3 | trigger 它调用给定事件的回调函数。 |
| 4 | once 它扩展了backbone.Model类，同时创建了自己的骨干模型。 |
| 5 | listenTo 它通知一个对象侦听另一个对象上的事件。 |
| 6 | stopListening 它可用于停止侦听其他对象上的事件。 |
| 7 | listenToOnce 它导致listenTo仅在删除回调函数之前发生一次。 |
内置事件目录
BackboneJS允许在应用程序中的任何需要使用全局事件。 它包含一些带参数的内置事件，如下表所示 -
| S.No. | 活动和描述 |
|---|---|
| 1 | "add"(model, collection, options) 它在模型添加到集合时使用。 |
| 2 | "remove"(model, collection, options) 它从集合中删除模型。 |
| 3 | "reset"(collection, options) 它用于重置收集内容。 |
| 4 | "sort"(collection, options) 它在集合需要使用时使用。 |
| 5 | "change"(model, options) 在对模型的属性进行更改时使用它。 |
| 6 | "change:[attribute]"(model, value, options) 在属性中有更新时使用。 |
| 7 | "destroy"(model, collection, options) 它在模型被销毁时触发。 |
| 8 | "request"(model_or_collection, xhr, options) 当模型或集合开始向服务器请求时使用它。 |
| 9 | "sync"(model_or_collection, resp, options) 当模型或集合与服务器成功同步时使用它。 |
| 10 | "error"(model_or_collection, resp, options) 它在请求服务器时出错时激活。 |
| 11 | "invalid"(model, error, options) 如果模型验证失败，则返回invalid。 |
| 12 | "route:[name]"(params) 当存在特定路线匹配时，可以使用此事件。 |
| 13 | "route"(route,params) 当与任何路线匹配时使用。 |
| 14 | "route"(router, route, params) 当与任何路线匹配时，它由历史使用。 |
| 15 | "all" 它通过传递事件名称作为第一个参数触发所有触发事件。 |
BackboneJS - Model
模型包含动态数据及其逻辑。 转换，验证，计算属性和访问控制等逻辑属于“模型”类别。 由于它包含所有应用程序数据，因此模型也被称为heart of JavaScript application的heart of JavaScript application 。
下表列出了可用于操作BackboneJS模型的所有方法 -
| S.No. | 方法和描述 |
|---|---|
| 1 | extend 它扩展了backbone.Model类，同时创建了自己的骨干模型。 |
| 2 | initialize 创建模型实例时，将调用类的构造函数，并在创建模型时通过定义初始化函数来调用它。 |
| 3 | get 它获取模型上属性的值。 |
| 4 | set 它设置模型中属性的值。 |
| 5 | escape 它类似于get函数，但返回模型属性的HTML转义版本。 |
| 6 | has 如果使用非空值或非未定义值定义的属性值，则返回true。 |
| 7 | unset 它从骨干模型中删除属性。 |
| 8 | clear 从骨干模型中删除所有属性，包括id属性。 |
| 9 | id 它唯一标识模型实体，可以在创建或填充模型时或在服务器上保存模型时手动设置。 |
| 10 | idAttribute 定义模型的唯一标识符，其中包含将用作id的类成员的名称。 |
| 11 | cid 它是Backbone自动生成的客户端ID，可以唯一标识客户端上的模型。 |
| 12 | attributes 属性定义模型的属性。 |
| 13 | changed 使用set()方法设置属性后更改已更改的所有属性。 |
| 14 | defaults 为模型设置默认值，这意味着如果用户未指定任何数据，则模型不会使用空属性。 |
| 15 | toJSON 返回属性的副本，作为JSON字符串化的对象。 |
| 16 | sync 它用于与服务器通信并表示模型的状态。 |
| 17 | fetch 通过委托模型中的sync()方法接受来自服务器的数据。 |
| 18 | save 通过委托sync()方法保存模型的数据，每当Backbone调用它时，该方法读取并保存模型。 |
| 19 | destroy 使用委托HTTP“删除”请求的Backbone.sync方法从服务器中销毁或删除模型。 |
| 20 | validate 如果输入无效，则返回指定的错误消息，或者如果输入有效，则不指定任何内容，只显示结果。 |
| 21 | validationError 如果验证失败或触发invalid事件，它将显示验证错误。 |
| 22 | isValid 它使用validate()方法检查模型状态，并检查每个属性的验证。 |
| 23 | url 它用于模型的实例，并将url返回到模型资源所在的位置。 |
| 24 | urlRoot 通过使用模型ID生成URL来启用url功能。 |
| 25 | parse 通过传递响应对象返回模型的数据，并以JSON格式表示数据。 |
| 26 | clone 它用于创建模型的深层副本或将一个模型对象复制到另一个对象。 |
| 27 | hasChanged 如果属性自上次set更改，则返回true。 |
| 28 | isNew 确定模型是新模型还是现有模型。 |
| 29 | changedAttributes 它返回自上次set以来已更改的模型属性，如果没有属性，则返回false。 |
| 30 | previous 它确定已更改属性的先前值。 |
| 31 | previousAttributes 返回上次更改事件之前的所有属性的状态。 |
下划线方法
有六种Underscore.js方法提供了在Backbone.Model上使用的功能。
| S.No. | 方法和描述 |
|---|---|
| 1 | _.keys(object) 它用于访问对象的可枚举属性。 |
| 2 | _.values(object) 它用于获取对象属性的值。 |
| 3 | _.pairs(object) 它根据键值对描述对象的属性。 |
| 4 | _.invert(object) 它返回对象的副本，其中键已成为值，反之亦然。 |
| 5 | _.pick(object, *keys) 它返回对象的副本并指示要拾取的键。 |
| 6 | _.omit(object, *keys) 它返回对象的副本并指示要省略的键。 |
BackboneJS - Collection
集合是有序的模型集。 我们只需要扩展骨干的集合类来创建我们自己的集合。 在集合中的模型上触发的任何事件也将直接在集合上触发。 这允许您侦听集合中任何模型中特定属性的更改。
下表列出了可用于操作BackboneJS-Collection的所有方法 -
| S.No. | 方法和描述 |
|---|---|
| 1 | extend 扩展主干的集合类以创建集合。 |
| 2 | model 要指定模型类，我们需要覆盖集合类的model属性。 |
| 3 | initialize 创建模型实例时，通过在创建集合时定义initialize函数来调用它。 |
| 4 | models 在集合内创建的模型数组。 |
| 5 | toJSON 使用集合中的JSON格式返回模型属性的副本。 |
| 6 | sync 它表示模型的状态，并使用Backbone.sync显示集合的状态。 |
| 7 | add 将模型或模型数组添加到集合中。 |
| 8 | remove 从集合中删除模型或模型数组。 |
| 9 | reset 它重置集合并填充新的模型数组或将清空整个集合。 |
| 10 | set 它用于使用模型中的一组项更新集合。 如果找到任何新模型，则项目将添加到该模型中。 |
| 11 | get 它用于通过使用idor cid从集合中检索模型。 |
| 12 | at 使用指定的索引从集合中检索模型。 |
| 13 | push 它类似于add（）方法，它接受模型数组并将模型推送到集合中。 |
| 14 | pop 它类似于remove（）方法，它接受模型数组并从集合中删除模型。 |
| 15 | unshift 在集合的开头添加指定的模型。 |
| 16 | shift 它从集合中删除第一个项目。 |
| 17 | slice 显示集合模型中元素的浅表副本。 |
| 18 | length 计算集合中的模型数量。 |
| 19 | comparator 它用于对集合中的项目进行排序。 |
| 20 | sort 对集合中的项目进行排序，并使用比较器属性对项目进行排序。 |
| 21 | pluck 从集合中的模型中检索属性。 |
| 22 | where 它用于通过使用集合中的匹配属性来显示模型。 |
| 23 | findWhere 它返回与集合中指定属性匹配的模型。 |
| 24 | url 它创建集合的实例并返回资源所在的位置。 |
| 25 | parse 通过传递响应对象返回集合的数据，并以JSON格式表示数据。 |
| 26 | clone 它返回指定对象的浅表副本。 |
| 27 | fetch 它使用sync方法从集合中的模型中提取数据。 |
| 28 | create 它在集合中创建模型的新实例。 |
下划线方法
下表列出了Underscore.js方法，这些方法提供了在Backbone.Collection上使用的功能。
| S.No. | 方法和描述 |
|---|---|
| 1 | _.each(list, iteratee, [context]) 使用iteratee函数迭代集合中的每个元素。 |
| 2 | _.map(list, iteratee, [context]) 它映射每个值并使用iteratee函数将它们显示在新的值数组中。 |
| 3 | _.reduce(list, iteratee, memo, [context]) 它将值列表缩减为单个值，也称为inject和foldl 。 |
| 4 | _.reduceRight(list, iteratee, memo, [context]) 它是reduce的正确关联版本。 |
| 5 | _.find(list, predicate, [context]) 它找到每个值并返回通过谓词或测试的第一个值。 |
| 6 | _.filter(list, predicate, [context]) 它过滤每个值并返回通过谓词或测试的值数组。 |
| 7 | _.reject(list, predicate, [context]) 它返回列表中被拒绝的元素，这些元素未传递预测值。 |
| 8 | _.every(list, predicate, [context]) 如果列表中的元素传递预测值，则返回true。 |
| 9 | _.some(list, predicate, [context]) 如果列表中的元素传递预测值，则返回true。 |
| 10 | _.contains(list, value, [fromIndex]) 如果列表中存在值，则返回true。 |
| 11 | _.invoke(list, methodName, *arguments) 它使用methodName()对列表中的每个值调用方法名称。 |
| 12 | _.max(list, [iteratee], [context]) 它指定列表中的最大值。 |
| 13 | _.min(list, [iteratee], [context]) 它指定列表中的最小值。 |
| 14 | _.sortBy(list, [iteratee], [context]) 它通过使用列表中的iteratee以升序返回已排序的元素。 |
| 15 | _.groupBy(list, [iteratee], [context]) 它将集合值划分为集合，使用列表中的iteratee进行分组。 |
| 16 | _.shuffle(list) 它返回列表的混洗副本。 |
| 17 | _.toArray(list) 它定义了列表的数组。 |
| 18 | _.size(list) 它定义列表中的值的数量。 |
| 19 | _.first(array, [n]) 它指定列表中数组的第一个元素。 |
| 20 | _.initial(array, [n]) 它返回所有内容，但指定列表中数组的最后一个条目。 |
| 21 | _.last(array, [n]) 它指定列表中数组的最后一个元素。 |
| 22 | _.rest(array, [index]) 它定义了数组中的其余元素。 |
| 23 | _.without(array, *values) 它返回列表中删除的所有实例的值。 |
| 24 | _.indexOf(array, value, [isSorted]) 如果在指定索引处找到该值，则返回该值;如果未找到，则返回-1。 |
| 25 | _.indexOf(array, value, [fromIndex]) 它返回数组中最后一次出现的值，如果未找到，则返回-1。 |
| 26 | _.isEmpty(object) 如果列表中没有值，则返回true。 |
| 27 | _.chain(obj) 它返回一个包装对象。 |
BackboneJS - Router
路由器用于路由客户端应用程序并定义应用程序对象的URL表示。 当Web应用程序为应用程序中的重要位置提供可链接，可收藏且可共享的URL时，需要路由器。
下表列出了可用于操作BackboneJS - Router -
| S.No. | 方法和描述 |
|---|---|
| 1 | extend 它扩展了主干的路由器类。 |
| 2 | routes 它定义了应用程序对象的URL表示。 |
| 3 | initialize 它为路由器实例化创建了一个新的构造函数。 |
| 4 | route 它为路由器创建路由。 |
| 5 | navigate 它用于更新应用程序中的URL。 |
| 6 | execute 当路由匹配其相应的回调时使用它。 |
BackboneJS - History
它跟踪历史记录，匹配适当的路由，触发回调以处理事件并启用应用程序中的路由。
开始
这是唯一可用于操作BackboneJS-History 。 它开始监听路由并管理可收藏URL的历史记录。
语法 (Syntax)
Backbone.history.start(options)
参数 (Parameters)
options - 选项包括与历史记录hashChange使用的pushState和hashChange等参数。
例子 (Example)
<!DOCTYPE html>
<html>
<head>
<title>History Example</title>
<script src = "https://code.jquery.com/jquery-2.1.3.min.js"
type = "text/javascript"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js"
type = "text/javascript"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"
type = "text/javascript"></script>
</head>
<script type = "text/javascript">
//'Router' is a name of the router class
var Router = Backbone.Router.extend ({
//The 'routes' maps URLs with parameters to functions on your router
routes: {
"myroute" : "myFunc"
},
//'The function 'myFunc' defines the links for the route on the browser
myFunc: function (myroute) {
document.write(myroute);
}
});
//'router' is an instance of the Router
var router = new Router();
//Start listening to the routes and manages the history for bookmarkable URL's
Backbone.history.start();
</script>
<body>
<!--These links will get displayed on the browser for changing the url each time when you click on them-->
<a href = "#route1">Route1 </a>
<a href = "#route2">Route2 </a>
<a href = "#route3">Route3 </a>
</body>
</html>
输出 (Output)
让我们执行以下步骤来查看上述代码的工作原理 -
将以上代码保存在start.htm文件中。
在浏览器中打开此HTML文件。
NOTE - 以上功能与地址栏有关。 因此，当您在浏览器中打开上述代码时，它将显示如下结果。
BackboneJS - Sync
它用于将模型的状态持久保存到服务器。
下表列出了可用于操作BackboneJS-Sync -
| S.No. | 方法和描述 |
|---|---|
| 1 | Backbone.sync 它将模型的状态持久保存到服务器。 |
| 2 | Backbone.ajax 它定义了自定义ajax函数。 |
| 3 | Backbone.emulateHTTP 如果您的Web服务器不支持REST或HTTP方法，请打开Backbone.emulateHTTP。 |
| 4 | Backbone.emulateJSON 它用于通过将方法设置为true来处理使用application/json编码的请求。 |
BackboneJS - View
视图用于反映“数据模型的外观”。 它们向用户表示模型的数据。 它们提供了向用户呈现模型数据的想法。 它处理用户输入事件，绑定事件和方法，呈现模型或集合以及与用户交互。
下表列出了可用于操作BackboneJS-Views 。
| S.No. | 方法和描述 |
|---|---|
| 1 | extend 它扩展了Backbone.View类以创建自定义视图类。 |
| 2 | initialize 它使用new关键字实例化视图。 |
| 3 | el 它定义了要用作视图引用的元素。 |
| 4 | $el 它表示视图元素的jQuery对象。 |
| 5 | setElement 它将现有DOM元素指定给不同的DOM元素。 |
| 6 | attributes 它们可以用作视图类的DOM元素属性。 |
| 7 | $(jQuery) 它用作包含$ function的选择器，并在视图元素中运行查询。 |
| 8 | template 在渲染视图时，模板会创建可重复使用的标记副本，并提供对实例数据的访问。 |
| 9 | render 它包含渲染模板的逻辑。 |
| 10 | remove 从DOM中删除视图。 |
| 11 | delegateEvents 使用回调方法将元素绑定到指定的DOM元素以处理事件。 |
| 12 | undelegateEvents 它从视图中删除委托事件。 |
BackboneJS - Utility
实用程序类定义了一组用于实现主干实用程序的方法。
下表列出了可用于操作BackboneJS-Utility -
| S.No. | 方法和描述 |
|---|---|
| 1 | Backbone.noConflict 它显示Backbone对象的原始值，并允许存储对主干的引用。 |
| 2 | Backbone.$ 它允许Backbone将特定对象用作DOM库。 |
