简介
Knockout 是一个基于 MVVM 模式的前端框架，它能够帮助开发者构建动态、交互式的用户界面。而 knockout.mapping 则是 Knockout 的一个 npm 包，它提供了一种方便快捷的方式来将服务器返回的 JSON 数据转化为适合在 Knockout 中使用的 ViewModel。
安装
安装 knockout.mapping 可以通过 npm 来进行：
npm install knockout.mapping
使用方法
创建 ViewModel
首先，需要定义一个 ViewModel 构造函数，其中包含从服务器获取到的数据：
function MyViewModel(data) { // 将 data 转化为适合在 Knockout 中使用的 ViewModel }
导入 knockout.mapping
接着，在页面中导入 knockout 和 knockout.mapping：
<script src="node_modules/knockout/build/output/knockout-latest.js"></script> <script src="node_modules/knockout.mapping/knockout.mapping.js"></script>
转化数据
现在，就可以使用 ko.mapping.fromJS 方法将服务器返回的 JSON 数据转化为 ViewModel：
-- -------------------- ---- ------- -------- ----------------- - --- ---- - ----- ----------------------- --- ------ - -- -- ---- ------- --------- -------------------------------------- - --- --------- - --- ------------------ ---------------------------- ---展开代码
单个对象与数组
在有些情况下，服务器返回的 JSON 数据是一个单独的对象，而不是一个数组。这时，需要使用 ko.mapping.fromJS 方法的第二个参数来指定 ViewModel 的构造函数：
-- -------------------- ---- ------- -------- -------------- - ----------------------- --- ------ - -------- ----------------- - --- ---- - ----- ------------- - --- --------------- - -- -- ---- ------- --------- -------------------------------------- - --- --------- - --- ------------------ ---------------------------- ---展开代码
如果返回的是一个数组，则可以直接传递给 ko.mapping.fromJS 方法：
-- -------------------- ---- ------- -------- ----------------- - --- ---- - ----- ---------- - --------------------- ----------------------- --- ------------ - -- -- ---- ------- --------- -------------------------------------- - --- --------- - --- ------------------ ---------------------------- ---展开代码
更新数据
当 ViewModel 中的数据发生变化时，可以使用 ko.mapping.toJS 方法将其转化为一个普通的 JavaScript 对象，然后发送给服务器进行更新操作：
-- -------------------- ---- ------- -------- ---------------- - -- - --------- --- ---------- -- --- --------- - ---------------------- -- -- ---- -------- -------- ---- ----------- ----- ------ ----- --------- --- -展开代码
示例代码
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- ----------------------- ---------- ------- ------------------------------------------------------ ------- --------------------------------------------------------------------- ------- ----------------------------------------------------------------- ------- ------ --- ------------------- ------- ---- ---------------------- ----- ---------------- ----------------- ----------------------- ----- ---------------- ------------------ ----------------------- ----- ---------------- ------------------ ----- ----- -------- -------- ----------------- - --- ---- - ----- ---------- - --------------------- ----------------------- --- ------------ - -------------------------------------- - --- --------- - --- ------------------ ---------------------------- --- --------- ------- -------展开代码
结论
使用 `knock
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/36219
