这里是古老mvvm框架knockoutjs的学习总结，边入门边填坑（1）
knockout（以下简称ko）是一个古老而有效的mvvm框架，实现了model-view-viewModel模式下的双向数据绑定。在如今angular和vue正火的年代，ko算得上是古董级了。在vue中文官网能看到对ko的评价是：
image.png
ko的应用场景
目前我使用ko + springmvc做后台项目，视图部分有jsp,freemarker等。项目用的是iframe，当然你也可以使用采用单页框架。为什么要使用ko做项目，原因有2个：1>支持低版本IE 2>引入MVVM框架来提升用户和开发者编程体验，做以前用jquery和jstl标签做不了的事情。
场景1 在一个页面内完成CRUD全部操作
image.png
图中 记录1是新增的记录。记录3是修改的记录。
数据表格初始化：
var viewModel = ko.mapping.fromJS({})//定义一个空对象viewModel，所有数据来自后台
ko.mapping.fromJS(monitorDTO,viewModel);//使用mapping插件赋值，省去了自己手写的巨大工作量
var $content = $('body');
ko.applyBindings(viewModel, $content[0]);//绑定viewModel数据到页面DOM
数据表格新增：
//定义一个JS对象，用于新增
var userItem = {//新增用户VO
id:"",//用户ID
organizationId:"",//所属机构
username:"",//用户名称
password:"",//密码
salt:"",//加密-盐
roleIds:"",//拥有角色列表 1,2,
locked:"",//被锁定true 未锁定false
isdeleted:"",//被删除1 未删除0
nickname:"",//昵称
isEditing:false,
passwordTwo:"",//再次输入密码
chosenRoleVOs:[],//拥有的角色
isChangePsd:false
}
//+新增按钮 被点击，加入记录1
viewModel.addUser = function(){
userItem.id = 0;
userItem.locked = false;
userItem.isdeleted = 0;
//列表头部加入新增对象userItem，也就是记录1
viewModel.sysUserPage.resultList().unshift(ko.mapping.fromJS(userItem));
viewModel.sysUserPage.resultList.valueHasMutated();
//保存刚才新增的记录1
viewModel.saveOneItem = function(vo){
var j = ko.mapping.toJSON(vo)
$.ajax({
url : bPath+'user/saveOneItem',
type : "POST",
dataType : "JSON",
contentType:"application/json",
data:j,
success : function(data) {
var obj = typeof data == "object" ? eval(data) : data
if(obj.status != 0){
tipError(obj.message)
return false;
}else{
//更新这条新增的记录
ko.mapping.fromJS(obj.data,{},vo);
}
},
//取消新增记录1
viewModel.removeOneItem = function(vo){
viewModel.sysUserPage.resultList.remove(vo)
}
数据表格修改：
//记录3的修改被点击，进入修改状态
viewModel.editUser = function(vo){
//先在mydata_id备份记录3，如果取消修改，可以还原
$(document).data("mydata_"+vo.id(), ko.mapping.fromJS(ko.mapping.toJS(vo)));
//记录3改为修改状态
vo.isEditing(true)
//提交修改记录3
viewModel.editUserInput = function(vo){
var j = ko.mapping.toJSON(vo)
$.ajax({
url : bPath+'user/editUserInput',
type : "POST",
dataType : "JSON",
contentType:"application/json",
data:j,
success : function(data) {
var obj = typeof data == "object" ? eval(data) : data
if(obj.status != 0){
tipError(obj.message)
return false;
}else{
//更新这条记录3
ko.mapping.fromJS(obj.data,{},vo);
//退出编辑状态
vo.isEditing(false)
tipOK("修改成功")
//修改被取消了，还原记录3
viewModel.editUserCancel = function(vo){
var oldVO = $(document).data("mydata_"+vo.id());
ko.mapping.fromJS(ko.mapping.toJS(oldVO), {}, vo);
vo.isEditing(false)
}
//JS和页面部分的分割线，以下为页面
//引入ko库和mapping库，这里搭配使用
//图中的表格在这里定义
//对应模板template_userlist
以上就是一个基础的CURD页面，和单页项目比，它就是一个组件。类似VUE中的component对应的xx.vue页面。了解了这个基础页面，再加上iframe，就能做一个伪单页项目了。目前项目就是这么做的，因为要支持IE7，又要有酷炫的效果。没有ko帮忙的话，应该是很难实现的。另外mapping框架也是很有用的，示例中很多地方用来拷贝KO对象，省去了很多手写代码的工作量，推荐使用。
有几个常用的链接，可以去看看
ko在github https://github.com/knockout/knockout
汤姆大叔的博客-ko指南 http://www.cnblogs.com/TomXu/archive/2011/11/21/2257154.html
mapping插件
http://knockoutjs.com/documentation/plugins-mapping.html