问题

  之前有了解过knockout,学习过绑定语法,结合帮助文档,做个Demo倒也不成问题,但是部分地方很不爽,不知道是我的用法不对,还是功力不够。

  比如说,标签里定义的data-bind属性名,必须在调用 ko.applyBindings(viewModel) 前必须定义。而结合具体的示例来看,html有如下代码:

    用户名:<label data-bind="text:userName"></label>
姓名:<label data-bind="text:realName"></label>
毕业院校:<select data-bind="
options:school,
optionsText:'schoolName',
optionsValue:'schoolID',
value:bySchool,
optionsCaption:'请选择'
"></select>

  初步写法则是:

    var viewModel = 
{
userName: ko.observable(),
realName: ko.observable(),
value: ko.observable(),
options: ko.observableArray()
}
ko.applyBindings(viewModel);
//后面ajax操作来修改viewModel
setTimeout(function () {
//加载可选择院校
var school = [{ schoolID: 1, schoolName: "清华大学" },
{ schoolID: 2, schoolName: "北京大学" },
{ schoolID: 3, schoolName: "复旦大学" }
];
viewModel.school(school);
//加载用户信息
var user = {
userName: 'codealone',
realName: '冲动',
bySchool: 1
};
viewModel.userName(user.userName);
viewModel.realName(user.realName);
viewModel.bySchool(user.bySchool);
});

Mapping插件

  写到这,有人可能要跟我说,mapping 插件可以解决这个问题。相关代码如下:

    The time on the server is: <span data-bind='text: serverTime'></span>
and <span data-bind='text: numUsers'></span>user(s) are connected.
<script type="text/javascript">
var data = { serverTime: '2010-01-07', numUsers: 3 };
var viewModel = {};
viewModel = ko.mapping.fromJS(data);
ko.applyBindings(viewModel);
</script>

  这样的确是可以解决,可是问题是,我的数据是ajax加载的呀。那么要先定义属性,于是修改后的代码则是:

    The time on the server is: <span data-bind='text: serverTime'></span>
and <span data-bind='text: numUsers'></span>user(s) are connected.
<script type="text/javascript">
var viewModel = {};
viewModel.serverTime = ko.observable();
viewModel.numUsers = ko.observable();
ko.applyBindings(viewModel);
setTimeout(function () { //模拟ajax取数据
var data = { serverTime: '2010-01-07', numUsers: 3 };
ko.mapping.fromJS(data, viewModel);
document.title = "方法已执行";
}, 1000);
</script>

  看起来很好,不过直到数据并没有更新。只有先在初始化之前mapping一次,后面才可以直接更改。

    The time on the server is: <span data-bind='text: serverTime'></span>
and <span data-bind='text: numUsers'></span>user(s) are connected.
<script type="text/javascript">
var data = { serverTime: '', numUsers: '' };
var viewModel = ko.mapping.fromJS(data);
ko.applyBindings(viewModel);
setTimeout(function () { //模拟ajax取数据
var data = { serverTime: '2010-01-07', numUsers: 3 };
ko.mapping.fromJS(data, viewModel);
document.title = "方法已执行";
}, 1000);
</script>

  这样的话,就没有问题的,但是这种写法让我很郁闷的是,难不成,我要把事先用到的数据结构全部先定义出来,然后mapping。

我的半自动Mapping

  后来觉得ko在初始化的时候,去检测每个需要绑定的属性,是否已经定义,如果未定义,则抛出异常,这个逻辑让我很不爽,但是不在初始化的时候定义,ko 根本就不知道需要监控哪些属性的变化,而这些属性到底是对象,还是数组。想到这里,觉得初始化的定义难以避免,就想了个方法,批量注册初始化观察对家和批量注册。实现方式很简单,看源码就可以得知。这里贴一下调用方式,第一行代码中的data参数是为了将批量注册的属性名存下来,便于后面直接取出这几个属性的值。

    ko.mapper.observable(viewModel, ['userName', 'realName', 'bySchool'], 'data');
ko.mapper.observableArray(viewModel, ['school']);

  以上操作则是完成了初始化,那么后面的赋值如何批量来进行呢,调用方式如下:

        //加载可选择院校
var school = [{ schoolID: 1, schoolName: "清华大学" },
{ schoolID: 2, schoolName: "北京大学" },
{ schoolID: 3, schoolName: "复旦大学" }
];
ko.mapper.extend(viewModel, {
school: school
});
//加载用户信息
var users = {
userName: 'codealone',
realName: '冲动',
bySchool: 1
};
ko.mapper.extend(viewModel, users);

  第一个extend,最终执行了 viewModel.school(school);

  第二个extend,最终执行了viewModel.userName(users.UserName),viewModel.realName(users.realName);等。

  这样算是完成了一种mapping。

  再说说说刚刚的data参数问题,data参数是为了将属性保存下来,便于后面取出这些属性的值。Ko的取值是这样的,拿上面的viewModel来说,定义了userName,realName,bySchool,那么取值方式则是viewModel.userName(),viewModel.realName(),viewModel.bySchool() ...

        //读取页面上的用户信息
var userInfo = ko.mapper.getValue(viewModel, 'data');
var userInfo2 = ko.mapper.getValue(viewModel, ['userName', 'realName', 'bySchool']);

  这样得到的数据则为:

  {

    userName:'xxxx',

    realName:'xxxxxx',

    bySchool:1

  }

完整示例

  完整页面代码如下:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="../knockout-3.0.0.debug.js"></script>
<script src="../knockout.mapper.js"></script> </head>
<body>
用户名:<label data-bind="text:userName"></label>
姓名:<label data-bind="text:realName"></label>
毕业院校:<select data-bind="
options:school,
optionsText:'schoolName',
optionsValue:'schoolID',
value:bySchool,
optionsCaption:'请选择'
"></select>
</body>
</html>
<script type="text/ecmascript">
//半自动Mapping
var viewModel = {};
ko.mapper.observable(viewModel, ['userName', 'realName', 'bySchool'], 'data');
ko.mapper.observableArray(viewModel, ['school']);
ko.applyBindings(viewModel);
//所有的数据都是基于ajax读取的,这里使用setTimeout进行模拟
setTimeout(function () {
//加载可选择院校
var school = [{ schoolID: 1, schoolName: "清华大学" },
{ schoolID: 2, schoolName: "北京大学" },
{ schoolID: 3, schoolName: "复旦大学" }
];
ko.mapper.extend(viewModel, {
school: school
});
//加载用户信息
var users = {
userName: 'codealone',
realName: '冲动',
bySchool: 1
};
ko.mapper.extend(viewModel, users);
//读取页面上的用户信息
var userInfo = ko.mapper.getValue(viewModel, 'data');
var userInfo2 = ko.mapper.getValue(viewModel, ['userName', 'realName', 'bySchool']);
}, 1000);
</script>

完整的半自动Mapping页面

  测试代码下载

  希望能对于ajax加载的数据结构有更好的解决方案。

knockout 表单绑定 要怎么Mapping才好的更多相关文章

  1. Knockout学习之表单绑定器(上)

    表单绑定器 “click”绑定 Click 绑定器可以将javascript函数绑定到指定的dom元素,并且再该元素被点击时将触发绑定的函数,大多数情况下都会使用button.input和a元素,当然 ...

  2. vue -- v-model 表单绑定

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. Vue表单绑定(单选按钮,选择框(单选时,多选时,用 v-for 渲染的动态选项)

    <!DOCTYPE html><html>    <head>        <meta charset="utf-8">      ...

  4. Spirng MVC +Velocity 表单绑定命令对象

    通常,表单中的数据在提交之后可以通过Spring MVC的@RequestParam注解在控制器函数的参数列表中中提取出来,但是一旦表单数据过多的话,参数列表将会变得非常长,最好的解决方案是将表单中的 ...

  5. vue基础-动态样式&表单绑定&vue响应式原理

    动态样式 作用:使用声明式变量来控制class和style的值 语法: :class/:style 注意:尽可能不要把动态class和静态class一起使用,原因动态class起作用的时间会比较晚,需 ...

  6. Knockout学习之表单绑定器(下)

    “hasFocus”绑定 hasFocus绑定器会将DOM元素的焦点状态与视图模型中的属性相关联,当你设置视图模型中关联的属性为true或false后,将能够设置关键的DOM元素是否获得焦点. 比如下 ...

  7. (四)Knockout 表单

    click <div> You've clicked <span data-bind="text: numberOfClicks"></span> ...

  8. KnockoutJS 3.X API 第四章 表单绑定(10) textInput、hasFocus、checked绑定

    textInput绑定目的 textInput绑定主要用于<input>或者<textarea>元素.他提供了DOM和viewmodel的双向更新.不同于value绑定,tex ...

  9. vue form表单绑定事件与方法

    使用v-on绑定事件 <button @click="hello">Hello</button><br /> <button @click ...

随机推荐

  1. 准备篇(二)C语言

    因为C语言部分打算单独维护,所以 目录: 1. C语言基础篇(零)gcc编译和预处理 2. C语言基础篇(一)关键字 3. C语言基础篇(二)运算符 4. C语言指针篇(一)指针与指针变量 5. C语 ...

  2. [Bzoj4289]PA2012 Tax(Dijkstra+技巧建图)

    Description 给出一个N个点M条边的无向图,经过一个点的代价是进入和离开这个点的两条边的边权的较大值,求从起点1到点N的最小代价.起点的代价是离开起点的边的边权,终点的代价是进入终点的边的边 ...

  3. 17-比赛2 F - Fox And Two Dots (dfs)

    Fox And Two Dots CodeForces - 510B ================================================================= ...

  4. wlr设置 Blog Ping

    ref:http://www.cnblogs.com/zhangyang/archive/2011/07/22/2113856.html 设置 Blog Ping 1.什么是Ping服务(Ping S ...

  5. 第四模块:网络编程进阶&数据库开发 练习

    练习题 基于queue模块实现线程池 import threading from multiprocessing import Queue class A(threading.Thread): def ...

  6. P1875 佳佳的魔法药水

    P1875 佳佳的魔法药水 题目描述 发完了 k 张照片,佳佳却得到了一个坏消息:他的 MM 得病了!佳佳和大家一样焦急 万分!治好 MM 的病只有一种办法,那就是传说中的 0 号药水 ……怎么样才能 ...

  7. P3819 松江1843路(洛谷月赛)

    P3819 松江1843路 题目描述 涞坊路是一条长L米的道路,道路上的坐标范围从0到L,路上有N座房子,第i座房子建在坐标为x[i]的地方,其中住了r[i]人. 松江1843路公交车要在这条路上建一 ...

  8. Android 布局跟着NAVIGATION_BAR 重新布局

    要想让自己的布局跟着NAVIGATION_BAR 的变化重新布局,就不要设置 SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION. 这个FLAG. 这个flag 设置之后,你的 ...

  9. 剑指Offer - 九度1367 - 二叉搜索树的后序遍历序列

    剑指Offer - 九度1367 - 二叉搜索树的后序遍历序列2013-11-23 03:16 题目描述: 输入一个整数数组,判断该数组是不是某二叉搜索树的后序遍历的结果.如果是则输出Yes,否则输出 ...

  10. USACO Section1.2 Dual Palindromes 解题报告

    dualpal解题报告 —— icedream61 博客园(转载请注明出处)-------------------------------------------------------------- ...