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

版权声明:本文为博主原创文章,未经博主允许不得转载。

knockout一个页面中绑定多个model

1.   一个页面中绑定多个model需要引入插件Knockout-MultiModels  2.引入插件  jquery.livequery.js ,knockout.multimodels-0....
  • u012499210
  • u012499210
  • 2016年06月29日 20:44
  • 1746

Knockout select 例子

Knockout select 中可以指定文本和值,名称不限。 1、视图模型 var countries = [{country:'France',code:'01'}, ...
  • hongweigg
  • hongweigg
  • 2015年11月25日 19:25
  • 5228

knockout select绑定,选中默认值

$(function(){ var viewModel =function() { var self = this; self.departmentList = ko.observableArray...
  • chensirbbk
  • chensirbbk
  • 2015年04月02日 17:26
  • 11708

knockout页面绑定下拉列表select选中项错误问题

问题描述: (不方便使用源代码及原页面,现简要描述一下现象) 实体User包含属性type,type值{“aa”,“bb”,"cc"}。一list页面用于显示多行User数据,点击每行的编辑按钮,...
  • fiveF
  • fiveF
  • 2017年04月28日 10:14
  • 925

SpringMVC配置双数据源,一个java项目同时连接两个数据库

数据源在配置文件中的配置[java] view plain copy print?   
  • qq_33384065
  • qq_33384065
  • 2018年01月03日 10:15
  • 161

Knockout js类库学习笔记(一)数据绑定

Knockout js类库 学习笔记 数据绑定
  • aa466564931
  • aa466564931
  • 2014年04月09日 21:21
  • 2674

KnockoutJS Documentation-加载和保存json数据

http://www.cnblogs.com/w1991/p/4998707.html ko可用来构建复杂的客户端交互应用,但几乎所有的web应用都需要跟服务器交互数据,或者至少...
  • zdy0_2004
  • zdy0_2004
  • 2015年11月27日 13:22
  • 581

多个Excel文件中的多个Sheet合并到一个Excel文件中两个函数

{多个Excel文件中的多个Sheet合并到一个Excel文件中两个函数即使用实例create date :2008-04-01create man:Internetrootinternetroot@...
  • Internetroot
  • Internetroot
  • 2008年05月21日 22:38
  • 8973

多个DLL合并成一个DLL,把DLL合并到Exe中的解决方案

多个DLL合并成一个DLL,把DLL合并到Exe中的解决方案1:) 下载 http://download.microsoft.com/download/1/3/4/1347C99E-9DFB-4252...
  • xhhjin
  • xhhjin
  • 2011年03月25日 16:08
  • 3329

Knockout 绑定列表

上一个章节我们说到Knockout能够很方便地做数据绑定,也提供了一些实例。在通常的开发过程中,最常见的数据操作就是列表。今天写了一个例子来说明Knockout是如何做列表的数据绑定的。 1.控制器...
  • afandaafandaafanda
  • afandaafandaafanda
  • 2015年03月29日 18:24
  • 2395
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:knockoutjs从多个数据源获取到的数据合并到一个javascript的viewmodel中使用
举报原因:
原因补充:

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