knockoutjs-边入门边填坑（2）

这里是古老mvvm框架knockoutjs的学习总结，边入门边填坑（2）

在上一篇总结中，描述了一个CRUD简单例子，实现当前页面内的所有操作均为异步刷新，有很好的用户体验。同时开发人员编程也有固定的模式，弱化了jquery的直接DOM操作（仅用于ajax请求提交），强化了ko的数据操作(所有数据操作，事件操作)。如果有合适的异步请求插件，jquery也是可以放弃的。事实上单页angular和vue框架已经看不到jquery了。

以下是代码中的一些细节分析：
1.click事件

//当前使用的click事件写法
data-bind="click:function(){return $root.editUser(vo)},clickBubble:false"
//可以优化为
data-bind="click:$root.editUser,clickBubble:false"

click事件的优化写法

点击事件的模式化写法（循环内）
1.<span class="attent" data-bind="click:$root.followOne,clickBubble:false">+&ensp;关注</span>
2.<span class="attent" data-bind="click:$root.followOne2.bind($data,'里','中'),clickBubble:false">+&ensp;关注2</span>
    viewModel.followOne = function(item,event){//1.获取本行，event
        console.log(ko.toJS(item))  //vo
        console.log(event.shiftKey)  //event
    }
    viewModel.followOne2 = function(d1,d2,item,event){//2.获取本行，event，以及d1,d2
        console.log(d1)// 里
        console.log(d2)// 中
        console.log(ko.toJS(item)) //vo
        console.log(event.shiftKey) //event
    }       

点击事件的模式化写法（循环外）
3.<a href="#" data-bind="click:$root.testClick1,clickBubble:false">测试点1</a>
4.<a href="#" data-bind="click:$root.testClick2.bind($data,'里','中'),clickBubble:false">测试点2</a>
viewModel.testClick1 = function(dto,event){//3.获取dto,event
        console.log(dto.limit()) //dto
        console.log(event.shiftKey) //event
    }
    viewModel.testClick2 = function(d1,d2,dto,event){//4.获取dto,event,以及d1,d2
        console.log(d1) //里
        console.log(d2) //中
        console.log(dto.limit()) //dto
        console.log(event.shiftKey) //event
    }

2.回车触发事件
用户新增了记录1，在输入框填写数据后，可以直接回车，触发新增用户。

//页面上给input绑定了ko的事件监听
//keypress:$root.searchKeyboardCmd采用了事件的模式化写法（循环内）
data-bind="value:vo.username,valueUpdate:'keyup',event:{keypress:$root.searchKeyboardCmd}"

//回车触发确认新增用户
    viewModel.searchKeyboardCmd = function (data, event) { 
        if(event.keyCode == 13){
            viewModel.saveOneItem(data)
            return false;
        }
        return true;
    }

3.mapping的使用
新增userItem到ko的resultList列表中，此时userItem的ID是空的。提交新增请求，成功后，需要用后台返回的json对象obj.data赋值给ko的vo

//使用mapping把后台的json数据赋值给ko对象
 ko.mapping.fromJS(obj.data,{},vo);

使用mapping需要了解js对象，json对象和ko对象的区别，它们之间是可以互相转换的
json ： 来自后台，通常由后台服务返回JSON对象，包含列表，单个对象等 {status : 0 , message:'各种提示',data:{实际数据包}} (json对象)
js:从json获得实际数据包 xx.data (js对象)
ko: 把js对象用ko.mapping.fromJS转化成vo (ko对象)

json         ---->                  js        ----->                    ko      ------->                js          ---->       json
            ko.utils.parseJson        ko.mapping.fromJS(xxDTO,{} viewModel)      ko.mapping.toJS/ko.toJS        JSON.stringify
            JSON.parse

4.valueHasMutated
往列表中插入新KO对象，会触发列表上其他对象的KO事件，如果一次加多个，有时会触发多次，为了避免这个问题，加入了valueHasMutated方法，让所有新对象全部加入后，才执行一次触发事件。

其他的ko用法还有自定义绑定ko.bindingHandlers，全选/反选，列表渲染后自定义触发等。

5.my97DatePicker在ko中正确的显示时间

//页面使用新的日期绑定
data-bind="my97DatePicker:criteriaVO.headTime,sdf:'yyyy-MM-dd'"

//自定义 my97DatePicker
ko.bindingHandlers.my97DatePicker = {
            init: function (element, valueAccessor,allBindings) {
                var sdf = allBindings.get('sdf') || 'yyyy-MM-dd HH:mm:ss';  
                $(element).click(function() {
                    WdatePicker({dateFmt: sdf,onpicking:function(dp){
                            var nt = dp.cal.getNewDateStr()
                            valueAccessor()(nt)
                        },
                        oncleared:function(dp){
                            var nt = dp.cal.getNewDateStr()
                            valueAccessor()('')
                        }
                    })
                });
            },
            update: function (element, valueAccessor) {
                var v = valueAccessor()();
                $(element).val(valueAccessor()());
                if(v != null && v != ''){
                }
            }
    };

6 全选/反选
以前写checkbox的全选，反选，用jquery很繁琐，因为是直接操作DOM视图。ko的思想则不同，开发者只操作ko数据，具体视图交给ko自行渲染

//页面-全选
data-bind="checked:selectAll"
//页面-每一行
<input type="checkbox" data-bind="checked:fvo.fileCheck" >

//JS
viewModel.selectAll = ko.computed({
        //全选hkj
        read : function() {
            var item = ko.utils.arrayFirst(viewModel.yunFileVOs(), function(item) {
                return !item.fileCheck();
            });
            return item == null;           
        },
        write : function(value) {
            ko.utils.arrayForEach(viewModel.yunFileVOs(), function (item) {
                item.fileCheck(value);
            });
            
        }
    });

7. pushAll
   ko没有类似pushAll的语法。。。所以要批量提交，需要自实现。

//页面
viewModel.teacherRecommends.pushAll(valuesToPush)
//自实现pushAll，接收JS数组为参数
ko.observableArray.fn.pushAll = function(valuesToPush) {
       for(var i = 0 ; i < valuesToPush.length ; i++ ){
           var tempV = valuesToPush[i]
           console.log(">>>PUSH ALL ："+tempV.teacherId+"-"+tempV.realName)
           console.log(tempV.teacherId != '')
           if(tempV.teacherId != ''){
               this.push(ko.mapping.fromJS(tempV))
               
           }
       }
       this.valueHasMutated();//再次使用了valueHasMutated
       return this;
    };

KO的坑还是有的，但都有适配的方法来解决，而且都很容易做到。现在我主要把KO当一个简单的mvvm库来使用，这是它的天然优势，值得好好学习。再深入学习的话，就是组件了。如果做单页项目，建议转VUE学习

KO+路由也是可以做的，看这里
durandal框架（内置路由，搭配ko,requirejs）
http://durandaljs.com/get-started.html