knockoutjs從多個數據源獲取到的資料合併到一個javascript的viewmodel中使用
阿新 • • 發佈：2019-02-18
使用場景是這樣的。在頁面某部分自試題庫中隨機讀取了數十道題。試題的序號是在頁面中自動生成的。當點選某個試題序號的時候，我需要自試題庫中讀取這個試題標題，選項，答案等資訊，也需要這個標題的序號傳到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
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: ""這個物件中除了index外都是從資料庫中讀取的。Index就是要獲取的序號。, Title: "", Sort: "", Type:"", Option1: "", Option2: "", Option3: "", Option4: "", Answer: "", ImgUrl: "", VoiceUrl: "", Index:0 };
使用之前當然要初始化：
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中。
測試後，一切按設想的哪個樣子，問題解決