knockoutjs从多个数据源获取到的数据合并到一个javascript的viewmodel中使用

原创 2017年01月03日 17:04:08

使用场景是这样的。在页面某部分自试题库中随机读取了数十道题。试题的序号是在页面中自动生成的。当点击某个试题序号的时候,我需要自试题库中读取这个试题标题,选项,答案等信息,也需要这个标题的序号传到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 绑定对象到列表中 并用checkbox选择 返回数据

今天一个操作是先要ajax返回列表中的json数据,然后绑定到一个table列表中,table首列是一个checkbox控制器,可以多选多个数据对象,然后返回结果 html代码: ...

knockoutjs十一 value绑定

knockoutjs十一 value绑定我自己都没有想到自己会写一个博客写到第十一篇,而且看过我博客的人也越来越多,我在这期间也学会了更多,这个系列的博客估计在十五篇左右就结束了,我准备把经常用到的...

精选:深入理解 Docker 内部原理及网络配置

网络绝对是任何系统的核心,对于容器而言也是如此。Docker 作为目前最火的轻量级容器技术,有很多令人称道的功能,如 Docker 的镜像管理。然而,Docker的网络一直以来都比较薄弱,所以我们有必要深入了解Docker的网络知识,以满足更高的网络需求。

knockoutjs八 event绑定

knockoutjs八 event绑定今天讲的很简单,是事件绑定,因为click绑定本来就是事件绑定,所以基本上所有的内容相似,就不在多说。 Mouse

knockoutjs五 if的绑定

knockoutjs五 if的绑定今天是大年初一,实在无聊,写点东西,希望大家新的一年有新的收获。 Display message ...

QC中项目迁移

由于工作的需要,现在要求将QC中的项目(或部分项目)迁移到其他地方去(另外的QC中),下面将描述一下我实际的操作(已经通过实验):第一个方法(适合整个项目的迁移):按照网上其他地方给出的信息:1、建议...

knockoutjs二 observableArray的使用

knockoutjs二 observableArray的使用上次忘记讲了,viewmodel可以有好几仲形式。 1. var viewModel={} 这样写对应的绑定为 ko.apply...

knockoutjs从多个数据源获取到的数据合并到一个javascript的viewmodel中使用

使用场景是这样的。在页面某部分自试题库中随机读取了数十道题。试题的序号是在页面中自动生成的。当点击某个试题序号的时候,我需要自试题库中读取这个试题标题,选项,答案等信息,也需要这个标题的序号传到kno...

使用RxJava从多个数据源获取数据

试想,需要一些动态数据的时候,只要每次都请求网络就可以了。但是,更有效率的做法是,把联网得到的数据,缓存到磁盘或内存。 具体的说,计划如下: 偶尔的联网操作,只为获取最新数据。 尽可...

java从高到低取出数的每一位

输入任意位数,从高到低输出每一位 package com.lan.exercise20170604; import java.util.Scanner; /* 习题1: 1、输入一个3位的整型数,输...

TSQL-将一个表中多行的数据合并到一行数据

题目描述:按照id:vertex格式把所有行记录按照id从小到大合并到一行记录中。
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)