这里是古老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">+ 关注</span>
2.<span class="attent" data-bind="click:$root.followOne2.bind($data,'里','中'),clickBubble:false">+ 关注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);
});
}
});
- 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
