knockoutjs-边入门边填坑（1）

作者: 还是磊哥 | 来源:发表于2017-12-14 16:46 被阅读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

knockoutjs-边入门边填坑（1）

ko的应用场景

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读