前端 JS 框架 knockout.js 是一个流行的 MVVM 框架，它能够将数据模型与页面元素绑定，使得数据和 UI 实现了双向绑定。同时，npm 包 knockout-mapping 扩展了 knockout 的能力，可以实现 JS 对象与 knockout view model 之间的自动映射。
本文将详细介绍如何使用 npm 包 knockout-mapping，包括安装、初始化、使用及其相关知识点。本文适用于使用 knockout.js 的开发者。
安装 knockou-mapping
使用 npm 包管理器即可轻松安装 knockout-mapping：
npm install knockout-mapping --save
其中，--save 表示将这个包添加到项目依赖中。
初始化
在使用 knockout-mapping 之前，需要引入 knockout 和这个库：
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.min.js"></script>
这里使用的第二个 JS 链接就是 knockout-mapping 库。将他们引入到页面中后，我们就可以在 JS 中进行初始化：
-- -------------------- ---- -------
----- ------- - ----------------------------
----- --------- - ----------------
----- ------
---- ---
-------- -
--------- ----------
----- ----------
------- --------- ---------
--
-------- ----------- --------
---
----------------------------在这里，使用 mapping.fromJS() 将一个普通 JS 对象转化成了 knockout view model。返回的结果就是一个 knockout view model。这个 view model 赋值给 ko.applyBindings()，意味着数据已经绑定到 DOM 上，同时所有对 view model 的修改都会同步修改到 DOM。这就是 knockout 的核心机制。
使用
knockout-mapping 主要有 3 个函数：
mapping.fromJS()：将一个普通 JS 对象转换为一个 knockout view model；mapping.toJS()：将一个 knockout view model 转换为一个 JS 对象；mapping.fromJSON()：将一个 JSON 对象转换为一个 knockout view model。
下面展示一些具体的使用例子。
对 view model 进行 CRUD 操作
-- -------------------- ---- -------
----- ------- - ----------------------------
----- --------- - ----------------
--------- --
---
-------- ---------------- ---- -
-------------------------
----- -----
---- ---
---
-
-------- -------------------- -
-------------------------------- ---
-
----------------------------在这里，我们使用 push() 和 splice() 来修改 view model，这两个函数都是针对数组的。当我们使用 push() 添加一个元素时，knockout.js 会自动刷新 DOM，而当我们使用 splice() 删除一个元素时，也会自动刷新 DOM。
将 view model 转化为 JSON
-- -------------------- ---- -------
----- ------- - ----------------------------
----- --------- - ----------------
----- ------
-------- -
--------- ----------
----- ----------
------- --------- ---------
--
-------- ----------- --------
---
----- ---- - --------------------------
------------------以上代码输出结果如下：
-- -------------------- ---- -------
-
------- ------
---------- -
----------- ----------
------- ----------
--------- --------- ---------
--
---------- ----------- --------
-将 JSON 转化为 view model
-- -------------------- ---- -------
----- ------- - ----------------------------
----- ---- - -
------- ------
---------- -
----------- ----------
------- ----------
--------- --------- ---------
--
---------- ----------- --------
--
----- --------- - -----------------------
----------------------------以上代码的 viewModel 就是一个 knockout 视图模型了。
总结
本文详细介绍了怎样通过 npm 包 knockout-mapping 将 JS 对象和 knockout view model 进行映射，同样介绍了 knockout-mapping 的常用函数。最后我们通过使用例子，展示了如何对 view model 进行 CRUD 操作，以及如何在 view model 和 JSON 之间进行转换。
希望这篇文章可以帮助大家在开发过程中更加方便地使用 knockout.js，同时了解 knockout-mapping 的使用方法。祝大家使用愉快！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedb716b5cbfe1ea0611725