Knockout Mapping插件：如何将服务器数据转为全可观察对象

嘿，这个场景我太熟了！用Knockout Mapping插件能轻松把你的服务器数据转换成全可观察的对象结构，不用手动一个个定义observable，省超多时间。我给你一步步说怎么做：

第一步：确保引入必要的脚本 #

首先得在页面里引入Knockout核心库和Mapping插件，顺序别搞反：

<script src="knockout.js"></script>
<script src="knockout.mapping.js"></script>

第二步：用Mapping插件处理数据 #

你已经定义了myViewModel，其中courseData是一个初始值为null的observable。接下来只需要调用ko.mapping.fromJS()方法，把服务器返回的data转换成可观察对象，直接赋值给courseData就行：

// 你的视图模型
var myViewModel = { 
    courseData: ko.observable(null) 
};

// 服务器返回的数据
var data = { 
    "courses": [ 
        { 
            "srcCourses": [ 
                { "code": "001", "name": "Course 1"}, 
                { "code": "002", "name": "Course 2"} 
            ], 
            "destCourse": { "code": "003", "name": "Course 3"} 
        }, 
        { 
            "srcCourse": [ 
                { "code": "004", "name": "Course 4"}, 
                { "code": "005", "name": "Course 5"} 
            ], 
            "destCourse": { "code": "006", "name": "Course 6"} 
        } 
    ] 
};

// 关键一步：转换数据并赋值
ko.mapping.fromJS(data, {}, myViewModel.courseData);

第三步：验证转换结果 #

转换完成后，整个数据结构里的所有属性都会变成observable，数组会变成observableArray。比如你可以在控制台测试：

// 访问第一个课程组的第一个源课程名称
console.log(myViewModel.courseData().courses()[0].srcCourses()[0].name()); 
// 输出："Course 1"

额外小技巧：后续数据更新 #

如果之后服务器返回了新的数据，你可以直接用同样的方法更新courseData，Mapping插件会自动对比新旧数据，只更新变化的部分，不用手动重新构建整个对象：

// 假设newData是服务器返回的更新后的数据
ko.mapping.fromJS(newData, {}, myViewModel.courseData);

对了，注意到你数据里有个小细节：第一个课程组是srcCourses（复数），第二个是srcCourse（单数），Mapping插件完全不关心这个命名差异，都会正常转换成可观察数组，这点不用担心~

内容的提问来源于stack exchange，提问作者Laurence Frost