Backbone.js 是一个轻量级的 JavaScript 框架，用于构建单页应用程序和动态 web 应用程序。它提供了简单的 MVC 架构、模型和集合管理、视图和事件机制。在本文中，我们将讨论一些使用 Backbone.js 的技巧，包括如何创建模型、视图和集合、如何使用路由器和自定义事件等。
创建模型和集合
Backbone.js 中的模型是带有属性和方法的对象，它们可以表示应用程序中的数据。集合是多个模型的组合，通常用于管理数据列表。以下是如何创建模型和集合的示例代码：
-- -------------------- ---- -------
--- ------ - -----------------------
--------- -
----- ---
---- --
------ --
-
---
--- ------ - ----------------------------
------ ------
---在上面的代码中，我们定义了一个 Person 模型和一个 People 集合。Person 模型具有默认属性，包括名称、年龄和电子邮件地址。People 集合包含多个 Person 模型。你还可以添加其他属性和方法来扩展这些对象。
创建视图
Backbone.js 视图是负责渲染模型和集合的 HTML 元素。它们可以处理用户输入、呈现数据并相应地更新模型的变化。以下是如何创建视图的示例代码：
-- -------------------- ---- -------
--- ---------- - ----------------------
-------- -----
--------- -----------------------------------------
------- -
-------- -------------
--
------- ---------- -
--------------------------------------------------
------ -----
--
------------ ---------- -
------------ - - ---------------------- - -- ---- - - -----------------------
-
---
--- ---------- - ----------------------
-------- -----
------- ---------- -
------------------------------------- -
--- ---------- - --- ------------ ------ ------ ---
----------------------------------------
-- ------
------ -----
-
---在上面的代码中，我们定义了两个视图：PersonView 和 PeopleView。PersonView 视图是一个列表项元素，它使用 Underscore.js 模板渲染模型数据并处理点击事件。PeopleView 视图是一个无序列表元素，它遍历集合中的所有模型，并将每个模型渲染为 PersonView。
使用路由器
Backbone.js 路由器是一种机制，用于管理应用程序中的 URL 和视图之间的映射关系。它可以帮助应用程序实现深度链接和页面刷新时的正确状态。以下是如何使用路由器的示例代码：
-- -------------------- ---- -------
--- --------- - ------------------------
------- -
--- -------------
------------- ------------
--
----------- ---------- -
--- ------ - --- ---------
--- ---------- - --- ------------ ----------- ------ ---
---------------------------------------
---------------
--
----------- ------------ -
--- ------ - --- -------- --- -- ---
--- ---------- - --- ------------ ------ ------ ---
---------------------------------------
---------------
-
---
--- --------- - --- ------------
-------------------------在上面的代码中，我们定义了一个 AppRouter 路由器，它有两个路由：根路径和一个带有参数的路径。showPeople 和 showPerson 方法分别显示人员列表和单个人员信息。在这些方法中，我们创建了模型和视图，并将它们渲染到页面上。
自定义事件
Backbone.js 事件机制允许开发人员创建自定义事件并触
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/3631