本文主要是介绍knockoutjs从多个数据源获取到的数据合并到一个javascript的viewmodel中使用，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
使用场景是这样的。在页面某部分自试题库中随机读取了数十道题。试题的序号是在页面中自动生成的。当点击某个试题序号的时候，我需要自试题库中读取这个试题标题，选项，答案等信息，也需要这个标题的序号传到knockout同一个viewmodel中。刚开始序号打算是用javascript的cookie来获取的。可是还要找一个cookie插件，觉得麻烦。我印象中在knockout的说明中有多个源合并到一个viewmodel中的用法。于是找了下。还真找到了：
Mapping from multiple sources
You can combine multiple JS objects in one viewmodel by applying multiple ko.mapping.fromJS calls, e.g.:
var viewModel = ko.mapping.fromJS(alice, aliceMappingOptions); ko.mapping.fromJS(bob, bobMappingOptions, viewModel); |
Mapping options that you specify in each call will be merged.
是英文的，实现就两行代码。具体到我这个问题，那就要自己写了。首先定义JS对象：
var QuestionLibrary = {GID: "",IID: "",Title: "",Sort: "",Type:"",Option1: "",Option2: "",Option3: "",Option4: "",Answer: "",ImgUrl: "",VoiceUrl: "",Index:0 };这个对象中除了index外都是从数据库中读取的。Index就是要获取的序号。
使用之前当然要初始化：
page.VM.QuestionLibraryVM = ko.mapping.fromJS(QuestionLibrary);这两行代码不能放到$(function() 中。否则knockout会报错
$(function()中的点击事件：
//点击事件显示中间和下部内容$(".pointbox").click(function () {//console.info($(this).attr("id"));$(".pointboxcurrent").removeClass("pointboxcurrent");if (!$(this).hasClass("pointboxcurrent")) {$(this).addClass("pointboxcurrent");}var index=$(".pointbox").index($(this))+1;$.post("/member/GetQuestionLibrary", { iid: $(this).attr("id") }, function (data) {page.VM.QuestionLibraryVM = ko.mapping.fromJS(data, {}, page.VM.QuestionLibraryVM);page.VM.QuestionLibraryVM = ko.mapping.fromJS({Index:index}, {}, page.VM.QuestionLibraryVM);});});
合并代码就两行，第一行
page.VM.QuestionLibraryVM = ko.mapping.fromJS(data, {}, page.VM.QuestionLibraryVM);
把数据库中读取的数据赋值给
page.VM.QuestionLibraryVM。
第二行：
page.VM.QuestionLibraryVM = ko.mapping.fromJS({Index:index}, {}, page.VM.QuestionLibraryVM);
把{Index:index}对象也合并到page.VM.QuestionLibraryVM这个viewmodel中。
测试后，一切按设想的哪个样子，问题解决
这篇关于knockoutjs从多个数据源获取到的数据合并到一个javascript的viewmodel中使用的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
