knockoutjs-边入门边填坑（1）
2017-12-14 本文已影响0人
还是磊哥
这里是古老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库，这里搭配使用
<script type="text/javascript" src="${bPath }static/js/knockout/knockout340.js"></script>
<script type="text/javascript" src="${bPath }static/js/knockout/knockout.mapping241.js"></script>
//图中的表格在这里定义
<table class="am-table table-main" data-bind="template:{name:'template_userlist'}" style="border:0;"></table>
//对应模板template_userlist
<script type="text/html" id="template_userlist">
<thead>
<tr class="am-primary">
<th class="table-id">#</th><th class="table-title">用户名</th><th class="table-title">密码</th><th class="table-title">昵称</th><th class="table-title">拥有角色</th><th class="table-set">操作</th>
</tr>
</thead>
<tbody>
<!-- ko foreach:{data:sysUserPage.resultList,as:'vo'} -->
<!--浏览状态 -->
<!-- ko if:vo.isEditing() == false && vo.id() != 0-->
<tr>
<td><!-- ko text:$root.jisuanIndex($index()+1) --><!-- /ko --></td>
<td><!-- ko text:vo.username --><!-- /ko --></td>
<td class="">****** <a href="#" class=" am-icon-pencil-square-o admin-icon-yellow" data-bind="click:function(){return $root.changePsd(vo)},clickBubble:false">改密</a></td>
<td><!-- ko text:vo.nickname --><!-- /ko --> </td>
<td><!-- ko text:$root.convertRoleIdToName(vo) --><!-- /ko --></td>
<td>
<div class="am-btn-toolbar">
<div class="am-btn-group am-btn-group-xs">
<button class="am-btn am-btn-default am-btn-xs am-text-secondary" data-bind="click:function(){return $root.editUser(vo)},clickBubble:false"><span class="am-icon-pencil-square-o"></span> 修改</button>
<button class="am-btn am-btn-default am-btn-xs am-text-danger " data-bind="click:function(){return $root.deleteUser(vo)},clickBubble:false"><span class="am-icon-trash-o"></span> 删除</button>
</div>
</div>
</td>
</tr>
<!-- /ko -->
<!--浏览状态 end-->
<!--编辑状态 -->
<!-- ko if:vo.isEditing() && vo.id() != 0-->
<tr>
<td><!-- ko text:$index()+1 --><!-- /ko --></td>
<td>
<div class="am-input-group am-input-group-sm">
<!-- ko text:vo.username --><!-- /ko -->
</div>
</td>
<td class="">
****** </td>
<td>
<div class="am-input-group am-input-group-sm">
<input type="text" class="am-form-field" style="max-width: 200px;" data-bind="value:vo.nickname,valueUpdate:'keyup',event:{keypress:$root.searchKeyboardCmdEdit}" placeholder="请输入昵称">
</div>
</td>
<td>
<select multiple data-bind="attr:{id:$root.setId4select(vo)},options:$root.roleVOs4MultiSelect,optionsText:'role',optionsValue:'id',selectedOptions: vo.chosenRoleVOs" >
</select>
</td>
<td>
<div class="am-btn-toolbar">
<div class="am-btn-group am-btn-group-xs">
<button class="am-btn am-btn-default am-btn-xs am-text-secondary" data-bind="click:function(){return $root.editUserInput(vo)},clickBubble:false"><span class="am-icon-pencil-square-o"></span> 提交修改</button>
<button class="am-btn am-btn-default am-btn-xs am-text-danger " data-bind="click:function(){return $root.editUserCancel(vo)},clickBubble:false"><span class="am-icon-trash-o"></span> 取消修改</button>
</div>
</div>
</td>
</tr>
<!-- /ko -->
<!--编辑状态 end-->
<!--新增状态 -->
<!-- ko if:vo.isEditing()==false && vo.id()== 0-->
<tr>
<td><!-- ko text:$index()+1 --><!-- /ko --></td>
<td>
<div class="am-input-group am-input-group-sm">
<input type="text" class="am-form-field" style="max-width: 200px;" data-bind="value:vo.username,valueUpdate:'keyup',event:{keypress:$root.searchKeyboardCmd}" placeholder="请输入用户名">
</div>
</td>
<td class="">
<div class="am-input-group am-input-group-sm">
<input type="password" class="am-form-field" style="max-width: 200px;" data-bind="value:vo.password,valueUpdate:'keyup',event:{keypress:$root.searchKeyboardCmd}" placeholder="请输入密码">
<input type="password" class="am-form-field" style="max-width: 200px;" data-bind="value:vo.passwordTwo,valueUpdate:'keyup',event:{keypress:$root.searchKeyboardCmd}" placeholder="请再次输入密码">
</div>
</td>
<td>
<div class="am-input-group am-input-group-sm">
<input type="text" class="am-form-field" style="max-width: 200px;" data-bind="value:vo.nickname,valueUpdate:'keyup',event:{keypress:$root.searchKeyboardCmd}" placeholder="请输入昵称">
</div>
</td>
<td>
<select multiple data-bind="attr:{id:'select_0'},options:$root.roleVOs4MultiSelect,optionsText:'role',optionsValue:'id',selectedOptions: vo.chosenRoleVOs" >
</select>
</td>
<td>
<div class="am-btn-toolbar">
<div class="am-btn-group am-btn-group-xs">
<button class="am-btn am-btn-default am-btn-xs am-text-secondary" data-bind="click:function(){return $root.saveOneItem(vo)},clickBubble:false"><span class="am-icon-pencil-square-o"></span> 确定</button>
<button class="am-btn am-btn-default am-btn-xs am-text-danger " data-bind="click:function(){return $root.removeOneItem(vo)},clickBubble:false"><span class="am-icon-trash-o"></span> 取消新增</button>
</div>
</div>
</td>
</tr>
<!-- /ko -->
<!--新增状态 end-->
<!-- /ko -->
</script>
以上就是一个基础的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
