knockoutjs-边入门边填坑（1）

这里是古老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