欢迎来到51自学网!

51自学网

当前位置: 主页 > 网络编程 >

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

时间:2018-07-27 08:05来源:网络整理 作者:51自学网
Bootstrap是一个前端框架,解放Web开发者的好东东,展现出的UI非常高端大气上档次,理论上可以不用写一行css。只要在标签中加上合适的属性即可。 KnockoutJS是一个JavaScript实现的MVVM框架

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

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

一、Knockout.js简介

1、Knockout.js和MVVM

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

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

Knockout.js官网:

Knockout.js开源地址:https://github.com/knockout/knockout

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

2、最简单的实例

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

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

<script src="~/scripts/knockout/knockout-3.4.0.min.js"></script>

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

2.2、定义ViewModel

viewmodel是什么?其实,在js里面,它看上去就像一个json对象。我们定义一个viewmodel:

var myViewModel = { Name: "Lilei", profession: "软件工程师", };

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

<div> 姓名:<label data-bind="text:Name"></label><br /> 职业:<input type="text" data-bind="textinput:Profession" /> </div>

注意:对应input标签的文本,需要使用textinput,而普通标签的文本使用text即可。

2.4、激活绑定

做了以上三步,还需要激活knockout的绑定

ko.applyBindings(myViewModel);

做到这四部,基本实现了一个最简单的viewmodel的数据绑定。得到效果:

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


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

<div> 姓名:<label data-bind="text:Name"></label><br /> 职业:<input type="text" data-bind="textinput:Profession" /> </div> ko.applyBindings(myViewModel,document.getElementById("lb_name"));

得到结果:

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


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

3、监控属性

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

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

3.1、Observables:监控属性

我们将上面的例子改成这样:

(责任编辑:admin)

织梦二维码生成器
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
栏目列表
推荐内容