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中。
测试后,一切按设想的哪个样子,问题解决

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值