Backbone.js 是一个流行的前端 JavaScript 框架，它提供了一些方便的工具和构建应用程序所需的基本结构。其中最重要的组件之一是 Model 和 Collection。
在 Backbone.js 中， Model 是表示应用程序中的单个数据对象的核心对象。每个 Model 对象都有一组属性和方法，包括 get()、set() 和 save() 等常见方法。
相比之下， Collection 是一个包含多个 Model 对象的对象。它们可以通过添加或删除模型来动态地调整其大小，并提供搜索、排序和过滤集合的方法。
Model 和 Collection 的互动
在 Backbone.js 中，Collection 可以管理一组具有相同属性和方法的 Model 对象。这意味着您可以使用 Collection 来处理许多 Model 对象的操作，而无需编写重复代码。
为了将 Model 添加到 Collection 中，您只需要调用 add() 方法并传递一个 Model 实例即可。以下示例代码说明了如何创建 Model 和 Collection 并将 Model 添加到 Collection：
-- ---- ---- -----
--- ---- - -----------------------
--------- -
------ ---
------- ---
----- --
-
---
-- ---- ---- ----------
--- ------- - ----------------------------
------ ----
---
-- ---- ---- --
--- ----- - --- ------------ ---- ----- -------- ------- --- ----- ------------ ----- -------
--- ----- - --- ------------ --- ---- - ------------- ------- ------- ----- ----- -------
-- - ---- ----- ------- ---------- -
--- ------- - --- ----------
-------------------
-------------------在上面的示例中，我们首先创建了一个 Book Model 和一个 Library Collection。然后，我们创建了两个 Book 实例，并使用 add() 方法将它们添加到 Library Collection 中。
使用 Collection 进行数据操作
一旦您有了一个 Collection，您可以使用许多内置方法来处理其中的数据。
遍历 Collection
您可以使用 each() 方法遍历 Collection 中的每个 Model。以下是一个简单的示例：
---------------------------- -
--------------------------------
---在这个示例中，我们使用 each() 方法遍历 library Collection 中的每个 Model，并打印出每个 Model 的 title 属性的值。
搜索 Collection
如果您只想获取符合特定条件的 Model，则可以使用 where() 方法。它接受一个对象作为参数，该对象包含要匹配的属性和值。以下示例演示如何搜索 Collection：
--- ------------ - --------------------- ------------ --------------------------
在这个示例中，我们使用 where() 方法搜索 library Collection 中传递的 {genre: 'Mystery'} 对象。它返回一个包含匹配结果的新 Array。
过滤 Collection
Collection 还提供了 filter() 方法，该方法接受一个函数作为参数，并返回符合特定条件的 Model 数组。以下是一个简单的示例：
--- -------- - ------------------------------ -
------ ----------------- - -----
---
----------------------在这个示例中，我们使用 filter() 方法获取 library Collection 中年份早于 1950 年的所有 Book 实例，然后将它们存储在一个新的数组中。
总结
使用 Backbone.js 的 Model 和 Collection，您可以轻松地管理应用程序中的数据。通过添加和删除 Model，
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/26653