BootstrapTable与KnockoutJS相结合实现增删改查功能【一】

Bootstrap 前端之家
前端之家收集整理的这篇文章主要介绍了BootstrapTable与KnockoutJS相结合实现增删改查功能【一】，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

@H_404_0@Bootstrap是一个前端框架，解放Web开发者的好东东，展现出的UI非常高端大气上档次，理论上可以不用写一行css。只要在标签中加上合适的属性即可。


@H_404_0@KnockoutJS是一个JavaScript实现的MVVM框架。非常棒。比如列表数据项增减后，不需要重新刷新整个控件片段或自己写JS增删节点，只要预先定义模板和符合其语法定义的属性即可。简单的说，我们只需要关注数据的存取。


@H_404_0@

一、Knockout.js简介

@H_404_0@1、Knockout.js和MVVM

@H_404_0@如今，各种前端框架应接不暇，令人眼花缭乱，有时不得不感叹作为程序猿也真是苦逼，总有学不完的技术，何时是尽头，除非你转化！苦海无边，回头是不是岸，由你决定！

@H_404_0@Knockout.js是一个基于MVVM模式的轻量级的前端框架，有多轻？根据官网上面显示的最新版本v3.4.0，仅22kb。能够友好地处理数据模型和界面DOM的绑定，最重要的是，它的绑定是双向的，也就是说数据模型变化了，界面DOM上的数据也会跟着发生变化，反过来，界面DOM上的数据变化了，数据模型也会相应这个变化。这样能够大大减少我们的前端代码量，并且使得我们界面易于维护，再也不用写一大堆事件监控数据模型和界面DOM的变化了。下面博主会根据一个使用实例来说明这两点。

@H_404_0@Knockout.js官网：

Knockout.js开源地址：

@H_404_0@MVVM模式：这是一种创建用户界面的设计模式，MVVM把它拆分成三块就是Model、View、viewmodel，Model就是数据模型，View就是我们的视图，viewmodel就是一个视图模型，用来绑定数据模型和视图上面的dom元素。如果你使用过WPF和Silverlight，理解这个应该不是啥问题；没有使用过也什么关系，看完此文，你会有一个大致的认识。

@H_404_0@2、最简单的实例

@H_404_0@一般来说，如果你从零开始使用Knockout.js，你至少需要做以下四部

@H_404_0@

2.1、

去官网下载knockout.js文件，然后引用到view页面里面。

@H_404_0@注意：knockout.js并不需要jquery的支持，如果你的项目需要用到jquery的相关操作，则引用jquery；否则只引用以上文件即可。

@H_404_0@

2.2、

定义viewmodel

@H_404_0@viewmodel是什么？其实，在js里面，它看上去就像一个json对象。我们定义一个viewmodel：

viewmodel = { Name: "Lilei",profession: "软件工程师",};
@H_404_0@

2.3、

view视图里面定义绑定data-bind的标签

姓名：
@H_404_0@注意：对应input标签的文本，需要使用textinput，而普通标签的文本使用text即可。

@H_404_0@

2.4、激活绑定

@H_404_0@做了以上三步，还需要激活knockout的绑定

viewmodel);
@H_404_0@做到这四部，基本实现了一个最简单的viewmodel的数据绑定。得到效果：

@H_404_0@如果你够细心，会发现ko.applyBindings()方法有两个参数，第一个就是我们需要绑定的viewmodel，第二个又是什么呢？由 ko.applyBindings(myviewmodel); 可知，第二个参数是一个可选参数，它表示viewmodel绑定的标签的作用域，比如，我们将以上代码改一下：

姓名：
ko.applyBindings(myviewmodel,document.getElementById("lb_name"));
@H_404_0@得到结果：

@H_404_0@由此可知：第二个参数限定了myviewmodel的作用范围，也就是说，只有在id="lb_name"的标签上面绑定才会生效，如果第二个参数是div等容器标签，它表示该绑定的范围为该div下面的所有子标签。

@H_404_0@3、监控属性

@H_404_0@截止到上面的四步，我们看不到任何效果，看到的无非就是将一个json对象的的数据绑定到了html标签上面，这样做有什么意义呢？不是把简单的问题复杂化吗？别急，马上见证奇迹！上文说了，knockout最重要的意义在于双向绑定，那么如何实现我们的双向绑定呢？答案就是监控属性。

@H_404_0@在knockout里面，核心的有三个监控属性：Observables,DependentObservables,ObservableArray，Observe的意思翻译过来是观察、观测的意思，如果说成观察属性或者观测属性感觉不太恰当，我们暂且叫监控属性。

@H_404_0@

3.1、Observables：监控属性

@H_404_0@我们将上面的例子改成这样：

Index3
姓名：
@H_404_0@ko.observable("Lilei") 这一句的意义是将viewmodel的Name属性添加成为监控属性，一定Name属性变成监控属性，神奇的事情就发生了，我们来看看当我们写myviewmodel.的时候：

@H_404_0@Name由原来的属性变成方法了，也就是说一旦添加了ko.observable()，那么对应的属性就会变成方法，那么对于Name的取值和赋值都需要使用myviewmodel.Name()来处理。我们先来看看效果：

@H_404_0@代码释疑：很显然 myviewmodel.Name($(this).val()); 这一句将当前文本框的值赋给了Name属性，由于界面绑定了Name属性，所以label里面的值也随之发生了变化。或者你会说，这个使用textchange事件也可以做到的，只要将当前文本框的值赋给label标签，也可以达到这个效果，这个不算什么。确实，你的写法也可以达到目的，但是我们的监控属性的意义在于，任何地方改变了Name的值，界面都会随之变化，而不用每个地方去给label标签赋值，JS里面只需要把关注点方法myviewmodel.Name()上面即可。是不是很厉害~~

@H_404_0@

3.2、DependentObservables：监控依赖属性

@H_404_0@如果看了上面的监控属性还没过瘾？下面再来看看监控依赖属性的使用。

@H_404_0@我们将代码再改下看看：

Index3
姓名：
职业：
描述：
@H_404_0@先来看看效果：

@H_404_0@代码释疑：通过添加监控依赖属性 ko.dependentObservable() 将Des属性的值能同时监控到Name和Profession两个的变化，其中任何一个发生变化，Des绑定的标签都会触发改变，这样做的最大好处就是避免了我们js去操作dom的麻烦，有点意思吧。

@H_404_0@

3.3、ObservableArray；监控数组

@H_404_0@除了上面两种，ko还支持对数组对象的监控。我们来看一个例子：

Index3
@H_404_0@看看效果：

@H_404_0@代码释疑：以上通过ko.observableArray()这个方法添加了对数组对象的监控，也就是说，js里面任何地方只要对deptArr数组对象做了数组的改变，都会触发UI给出相应。需要注意的一点是，监控数组实际上是监控的数组对象本身，对于数组对象里面的子对象属性发生变化，是无法监控到的。比如我们将点击事件改成这样：

@H_404_0@效果：

@H_404_0@由此说明数组监控实际上监控的是数组对象本身，对于数组里面元素的属性变化不会监控。如果确实需要对数据里面对象的属性变化进行监控，需要再对数据里面对象属性使用ko.observable()，两者联合使用。有兴趣的可以试试。

@H_404_0@4、ko里面常见的data-bind属性

@H_404_0@上文中，我们使用了多个data-bind属性，那么在knockout里面，到底有多少个这种data-bind的属性呢。这里我们列出一些常用的属性。

@H_404_0@

4.1、text和inputText

@H_404_0@text，顾名思义就是文本的意思，这个绑定属性一般用于
@H_404_0@

4.9、style

@H_404_0@如果css绑定的作用是向标签动态添加或移除class样式，那么style绑定的作用就是想标签动态添加或移除某一个样式。比如：

viewmodel.Name()=='Lilei'?'red':'white'}">aaaa
@H_404_0@如果是添加或者移除多个，同css绑定的用法

@H_404_0@

4.10、attr

@H_404_0@attr绑定主要用于向标签添加移除某一个或多个属性（包括自定义属性），永和和css类似。

@H_404_0@

4.11、click

@H_404_0@click绑定表示在对应的DOM元素上面添加点击事件的执行方法。可以在任意元素上面使用。

　　　　var myviewmodel = { ClickFunc:function(){ alert($(event.currentTarget).val()); } }; ko.applyBindings(myviewmodel);
@H_404_0@event.currentTarget表示当前点击的DOM元素。有时为了简便，我们直接使用匿名函数的方式绑定，比如：

@H_404_0@但是这种将js揉到html里面的写法让博主难以接受，并且觉得维护起来相对不方便，尤其是点击事件里面的逻辑略复杂时。所以，如非必须，不建议直接写这种匿名函数的方式。

@H_404_0@

4.12、其他

@H_404_0@关于data-bind的所有绑定，可以看官网上面的介绍，这里就不一一列举了。需要用的时候去官网上查下就好了。看看官网上面列举的所有绑定：

@H_404_0@5、Json对象和监控属性的转化及关系

@H_404_0@我们知道，为了避免不同语言直接的展现方式，一般情况下我们前端和后端交互的时候统一使用Json格式的数据，我们通过http请求从后端取到的数据模型，而要使用我们的ko的一些特性，必须要将这些普通的数据模型转换成ko的监控属性；反过来，我们使用ko的监控属性，有时又需要把这些属性转换为普通的json数据传到后台，那么如何实现这个转换呢？

@H_404_0@

5.1、JSON对象转换成viewmodel

@H_404_0@比如我们从后台取到一个Json对象，然后把它变成到我们的viewmodel，然后绑定到我们的界面DOM。

@H_404_0@我们发送一个请求到后端，取到一个json对象，赋值到oJson，然后我们把oJson转换成viewmodel，最直观的方式就是手动转换了。比如我们可以这样：

viewmodelJson = { DeptName: ko.observable(),DeptLevel: ko.observable(),DeptDesc:ko.observable() }; ko.applyBindings(myviewmodelJson);
@H_404_0@然后在ajax请求的success里面

viewmodelJson.DeptName(oJson.DeptName); myviewmodelJson.DeptLevel(oJson.DetpLevel); myviewmodelJson.DeptDesc(oJson.DeptDesc); }
@H_404_0@这样，通过手动绑定，实现了json对象到viewmodel的绑定。这样做的好处就是灵活，坏处显而易见，手工代码量太大。

@H_404_0@还好，有我们万能的开源，总有人想到更好的办法，我们使用knockout.Mapping组件就能很好地帮助我们界面json对象到viewmodel的转换。

@H_404_0@knockout.Mapping开源地址：下载

@H_404_0@下面来简单看看它如何使用，还是上面的例子，我们不用实现定义任何viewmodel，首先需要引用knockout.mapping.js

猜你在找的Bootstrap相关文章

使用BootStrapValidator来完成前端输入验证
BootStrapValidator可以用于完成基于BootStrap搭建的前端UI中的输入验证，由于本插件完全基...
顶求网首页整体设计思路
顶求网首页是一个web2.0博客类的网站首页，在该网站中用户可以发表博客，也可以推荐图书给...
自己手写简约实用的Jquery tabs插件（基于bootstrap环境）
一直想改版网站首页的图书展示部分，以前的展示是使用BootStrap的传统的collapse,网页篇幅...
BootStrap中Affix控件的使用方法及如何保持布局的美观
在视窗足够大的时候是没有任何问题的，但是当拖动改变视窗的大小后会发现布局又变乱了，这...
针对BootStrap中tabs控件的美化和完善
BootStrap中的tabs控件以其简单易用而很受广大开发者的欢迎。但是，它的样式比较单一，如何...
使用BootStrap制作用户登录UI
先看看劳动成果 布局 左右各一半（col-md-6） 左侧登录框占左侧一半的10/12 右侧是登录系统...
打造简单实用的Thinkphp分页样式(Bootstrap版本)
先吐槽一下ThinkPHP3.1版的分页样式，虽然看起来也很简单大方，但是所有的页码全是使用简单...
Bootstrap轮播（carousel）插件中图片变形的终极解决方案——使用jqthumb.js
在顶求网的首页中我使用了BootStrap的轮播（carousel）插件来展示文章中的图片。我在程序中...
移动开发中单页异步加载所有列表项
在做WEB开发的时候我们经常会遇到分页的处理，如果在PC上显示网页的话，使用传统的分页是可...
仿豆瓣分类标签的实现
为了和文章分类部分的样式进行区分，我决定自己动手写一个具有其他样式的分类标签集。刚好...
HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsTypeScriptVueDojoJsonElectronNode.jsextjsExpress XMLES6AjaxFlashUnityReactFlexAnt DesignWeb前端微信小程序微信公众号
关闭广告单独headers封装代码提示错误整数正则非0开头跳页出页码antd table提示URL未注册公众号支付vue hash模式iSlider车牌键盘循环图片echarts 双折左右布局DllPlugin对象创建打字游戏圈选两栏云函数蒙版ES2020橱窗无缝滚动轮播色块碰撞组件销毁文档操作