华夏棋牌 > web前端 > js教程 > 注释

BootstrapTable与KnockoutJS相联络完成增删改查功效【一】_javascript手艺

原创 2016-05-16 09:00:03 0 823
赞助会员专享特权
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开源地址:

MVVM形式:这是一种培植用户界面的设计形式,MVVM把它拆分红三块就是Model、View、ViewModel,Model就是数据模子,View就是我们的视图,ViewModel就是一个视图模子,用来绑定数据模子和视图下面的dom元素。假定你应用过WPF和Silverlight,明确这个应当不是啥效果;没有应用过也甚么关系,看完此文,你会有一个年夜致的熟悉。

2、最质朴的实例

浅易来讲,假定你从零泉源应用Knockout.js,你至少须要做以下四部

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

 

重视:knockout.js着实不须要jquery的支持,假定你的项目须要用到jquery的相关操作,则援用jquery;否则只援用以上文件便可。

2.2、界说ViewModel

viewmodel是甚么?着实,在js外面,它看上去就像一个json工具。我们界说一个viewmodel:

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

2.3、view视图外面界说绑定data-bind的标签

姓名:
职业:

重视:对应input标签的文本,须要应用textinput,而浅易标签的文本应用text便可。

2.4、激活绑定

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

ko.applyBindings(myViewModel); 

做到这四部,基本完成了一个最质朴的viewmodel的数据绑定。取得效果:


假定你够仔细,会发现ko.applyBindings()措施有两个参数,第一个就是我们须要绑定的viewmodel,第二个又是甚么呢?由 ko.applyBindings(myViewModel); 可知,第二个参数是一个可选参数,它体现viewmodel绑定的标签的作用域,好比,我们将以上代码改一下:

姓名:
职业:
ko.applyBindings(myViewModel,document.getElementById("lb_name"));

取得效果:


由此可知:第二个参数限制了myViewModel的作用规模,也就是说,只需在id="lb_name"的标签下面绑定才会掉效,假定第二个参数是div等容器标签,它体现该绑定的规模为该div下面的一切子标签。

3、监控属性

阻拦到下面的四步,我们看不就职何效果,看到的不外就是将一个json工具的的数据绑定到了html标签下面,这样做有甚么意义呢?不是把质朴的效果严重年夜化吗?别急,立时见证事业!上文说了,knockout最主要的意义在于双向绑定,那么若何完成我们的双向绑定呢?谜底就是监控属性。

在knockout外面,焦点的有三个监控属性:Observables,DependentObservables,ObservableArray,Observe的意思翻译已往是不雅不雅察、不雅不雅测的意思,假定说成不雅不雅察属性或许不雅不雅测属性感应不太适当,我们暂且叫监控属性。

3.1、Observables:监控属性

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



Index3 






华夏棋牌

姓名:
职业:

ko.observable("Lilei") 这一句的意义是将viewmodel的Name属性添加成为监控属性,一定Name属性酿成监控属性,希奇的使命就发生了,我们来看看当我们写myViewModel.的时间:

Name由原来的属性酿成措施了,也就是说一旦添加了ko.observable(),那么对应的属性就会酿成措施,那么关于Name的取值和赋值都须要应用myViewModel.Name()来处置赏罚赏罚。我们先来看看效果:

代码释疑:很显着 myViewModel.Name($(this).val()); 这一句将以后文本框的值赋给了Name属性,由于界面绑定了Name属性,以是label外面的值也随之发生了变换。或许你会说,这个应用textchange事宜也能够或许做到的,只需将以后文本框的值赋给label标签,也能够或许到达这个效果,这个不算甚么。确切,你的写法也能够或许到达目的,然则我们的监控属性的意义在于,任何地方改变了Name的值,界面都邑随之变换,而不用每个地方去给label标签赋值,JS外面只须要把关注点措施myViewModel.Name()下面便可。能否是很凶悍~~

3.2、DependentObservables:监控依隶属性

假定看了下面的监控属性还没过瘾?下面再来看看监控依隶属性的应用。

我们将代码再改下看看:



Index3 






华夏棋牌

姓名:
职业:
形貌:

先来看看效果:


代码释疑:经由历程添加监控依隶属性 ko.dependentObservable() 将Des属性的值能同时监控到Name和Profession两个的变换,其中任何一个发生变换,Des绑定的标签都邑触发改变,这样做的最年夜利益就是防止了我们js去操作dom的费事,有点意思吧。

3.3、ObservableArray;监控数组

除下面两种,ko还支持对数组工具的监控。我们来看一个例子:



Index3 






华夏棋牌

看看效果:

代码释疑:以上经由历程ko.observableArray()这个措施添加了对数组工具的监控,也就是说,js外面任何地方只需对deptArr数组工具做了数组的改变,都邑触发UI给出照顾。须要重视的一点是,监控数组现实上是监控的数组工具自己,关于数组工具外面的子工具属性发生变换,是没法监控到的。好比我们将点击事宜改成这样:

$(function () {
$("#btn_test").on("click", function () {
deptArr[1].Name = "aaa";
});
});

效果:


由此诠释数组监控现实上监控的是数组工具自己,关于数组外面元素的属性变换不会监控。假定确切须要对数据外面工具的属性变换阻拦监控,须要再对数据外面工具属性应用ko.observable(),二者联络应用。有兴趣的可以尝尝。

4、ko外面有数的data-bind属性

上文中,我们应用了多个data-bind属性,那么在knockout外面,现实有若干个这类data-bind的属性呢。这里我们列出一些经常应用的属性。

4.1、text和inputText

text,望文生义就是文本的意思,这个绑定属性浅易用于

等标签显示文本,虽然,假定你宁愿,任何标签都可以应用这个绑定。它是应用基本上没甚么好说的。假定没有应用ko.observable(),则是静态绑定,否则是静态绑定。

inputText,input标签的文本,相当于input标签的value属性。

  
姓名:
职业:
     //1.界说ViewModel var myViewModel = { Name: ko.observable("Lilei"), Profession: "软件工程师", }; //2.激活绑定 ko.applyBindings(myViewModel);

4.2、value

这个绑定属性浅易用于input标签,和下面的inputText基内幕似。只不外value加倍尺度。

和value一起应用的尚有一个参数valueUpdate,它体现界面做一个甚么操作的时间更新该value。valueUpdate主要取值有change/keyup/keypress/afterkeydown等。划分体现文本变换、键盘缩起、键盘按下、键盘按下以后等操作时间更新value对应的viewmodel的值。

姓名:

    var myViewModel = { Name: ko.observable("Lilei"), };//2.激活绑定 ko.applyBindings(myViewModel);

上述代码体现键盘收起的时间更新文本框的value属性和myViewModel的Name属性。

4.3、checked

checked绑定浅易用于checkbox、radio等可以选中的表单元素,它对应的值是bool类型。和value的用法基内幕似,就不做重复诠释。

4.4、enable

enable绑定浅易用于能否启用标签元素,浅易用于表单元素的启用和禁用。和disabled相反,对应的值也是bool类型。

由于IsMen属性酿成了false,一切对应的文本框会显示禁用状态。

4.5、disabled

和enable相反,用法和enable类似。

4.6、options

上文中在应用select的绑准时间应用过options,它体现select标签的option的荟萃,对应的值为一个数组,体现这个下拉框的数据源。可以应用observableArray启用对这个数据源的监控。用法见下面。

4.7、html

text绑定现实上是对标签innerText的设置和取值,那么同理,html绑定也是对innerHTML的设置和取值。它对应的值为一段html标签。

4.8、css

css绑定是添加或删除一个或多个项目(class)到DOM元素上。应用名堂:

 
aaaa
var myViewModel = { Name: ko.observable("Lilei"), Profession: ko.observable("软件工程师"), Age:ko.observable(40) };

该div会显示配风物。

假定须要增添或移除多个项目,只需稍微改下便可,好比:

aaaa

4.9、style

假定css绑定的作用是向标签静态添加或移除class项目,那么style绑定的作用就是想标签静态添加或移除某一个项目。好比:

aaaa

假定是添加或许移除多个,同css绑定的用法

4.10、attr

attr绑定主要用于向标签添加移除某一个或多个属性(网罗自界说属性),永和和css类似。

4.11、click

click绑定显露在对应的DOM元素下面添加点击事宜的推行措施。可以在随便任性元素下面应用。

    var myViewModel = { ClickFunc:function(){ alert($(event.currentTarget).val()); } }; ko.applyBindings(myViewModel);

event.currentTarget表当以后点击的DOM元素。有时为了轻盈,我们直接应用匿名函数的要领绑定,好比:

然则这类将js揉到html外面的写法让博主难以吸收,而且以为掩护起来相对未便利,特殊是点击事宜外面的逻辑略严重年夜时。以是,如非必须,不建议直接写这类匿名函数的要领。

4.12、其他

关于data-bind的一切绑定,可以看官网下面的简介,这里就不逐一枚举了。须要用的时间去官网上查下就好了。看看官网下面枚举的一切绑定:

5、Json工具和监控属性的转化及关系

我们知道,为了防止不合语言直接的展示要领,浅易情形下我们前端和后端交互的时间统一应用Json名堂的数据,我们经由历程http请求从后端取到的数据模子,而要应用我们的ko的一些特点,必须要将这些浅易的数据模子转换成ko的监控属性;反已往,我们应用ko的监控属性,有时又须要把这些属性转换为浅易的json数据传到后台,那么若何完成这个转换呢?

5.1、JSON工具转换成ViewModel

好比我们从后台取到一个Json工具,然后把它酿成到我们的viewmodel,然后绑定到我们的界面DOM。

$.ajax({
url: "/Home/GetData",
type: "get",
data: {},
success: function (data, status) {
var oJson = data;
}
}); 

我们发送一个请求到后端,取到一个json工具,赋值到oJson,然后我们把oJson转换成viewmodel,最直不雅不雅的要领就是手动转换了。好比我们可以这样:

    var myViewModelJson = {
DeptName: ko.observable(),
DeptLevel: ko.observable(),
DeptDesc:ko.observable()
};
ko.applyBindings(myViewModelJson); 

然后在ajax请求的success外面

success: function (data, status) {
var oJson = data;
myViewModelJson.DeptName(oJson.DeptName);
myViewModelJson.DeptLevel(oJson.DetpLevel);
myViewModelJson.DeptDesc(oJson.DeptDesc);
} 

这样,经由历程手动绑定,完成了json工具到viewmodel的绑定。这样做的利益就是无邪,坏处不言而喻,手工代码量太年夜。

还好,有我们万能的开源,总有人想到更好的措施,我们应用knockout.Mapping组件便可以很好地赞助我们界面json工具到viewmodel的转换。

knockout.Mapping开源地址:下载

下面来质朴看看它若何应用,照样下面的例子,我们不用完成界说任何viewmodel,首先须要援用knockout.mapping.js


重视:这里knock.mapping-lastest.js必须要放在knockout-3.4.0.min.js的前面,否则挪用不到ko.mapping。

然后直接在success函数外面这样应用

         success: function (data, status) {
var myViewModelJson2 = ko.mapping.fromJS(data);
ko.applyBindings(myViewModelJson2);
} 

我们来看效果:


代码释疑:经由历程ajax请求从后台取到的json工具,经由历程ko.mapping.fromJS(),很便利地将其转换成了viewmodel,能否是猴尖锐!虽然除这类用法,还可以更新曾经存在viewmodel,应用以下:

    var myViewModelJson = {
DeptName: ko.observable(),
DeptLevel: ko.observable(),
DeptDesc:ko.observable()
};
ko.applyBindings(myViewModelJson);
$(function () {
$.ajax({
url: "/Home/GetData",
type: "get",
data: {},
success: function (data, status) {
ko.mapping.fromJS(data, myViewModelJson)
}
});
}); 

在success外面,凭证data的值去更新myViewModelJson这个viewmodel。

5.2、ViewModel转换成JSON工具

下面说了JSON工具转化为viewmodel,那么反已往,假定我们须要将viewmodel转换为Json工具转到达后端,怎样办呢?

knockout外面供应了两个措施:

•ko.toJS():将viewmodel转换为JSON工具
•ko.toJSON():将viewmodel转换为序列化过的Json string。

好比我们的代码以下:

$(function () {
var oJson1 = ko.toJS(myViewModelJson);
var oJson2 = ko.toJSON(myViewModelJson);
});
var myViewModelJson = {
DeptName: ko.observable("研发部"),
DeptLevel: ko.observable("2"),
DeptDesc: ko.observable("开发一伙人")
};
ko.applyBindings(myViewModelJson); 

那么我们来监控下oJson1和oJson2的值:

代码释疑:经由历程下面这张图,很容易明确两个措施的差异,这里须要诠释一点的是,这两个措施是ko自带的,着实不须要mapping组件的支持。

6、培植自己的data-bind属性

下面讲了那么多,都是简介knockout外面的一些绑定和监控,那么,有些时间,我们须要自界说我们的data-bind,型如: ,这类需求再做组件封装的时间特殊有用,能否可以完成呢?虽然可以。

在knockout外面,供应了ko.bindingHandlers属性,用于自界说data-bind属性,它的语法以下:

ko.bindingHandlers.MySelect = {
init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
},
update: function (element, valueAccessor, allBindingsAccessor, viewModel) {
}
}; 

就这样诠释一下,然后在我们的html标签外面便可以应用自界说data-bind了。

MySelect就是我们自界说的绑定属性,$root暂且可以明确为初始化(虽然这样诠释着实不严谨,假定有加倍公正的诠释迎接示正)。

华夏棋牌代码释疑:经由历程下面的ko.bindingHandlers便可以质朴完成自定绑定属性,须要诠释两点:

•init,望文生义初始化自界说绑定,它外面网罗多个参数,浅易应用较多的是前两个参数,第一个参数体现初始化自界说绑定的DOM元素,第二个参数浅易用来转达初始化的参数。
•update,更新回调,当对应的监控属性变换时,会进入到这个措施。假定不须要回调,此措施可以不声明。

在此博主就联络原来分享过的一个下拉框组件MutiSelect来质朴诠释下自界说绑定的应用。

6.1、最质朴的MutiSelect

浅易情形下,假定我们须要应用ko去封装一些通用组件,就须要用到我们的ko.bindingHandlers,下面博主就联络MutiSelect组件来讲说若何应用。

首先声明自界说的ko.bindingHandlers,在init措施外面初始化我们的select标签

ko.bindingHandlers.MySelect = {
init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
$(element).multiselect();
},
update: function (element, valueAccessor, allBindingsAccessor, viewModel) {
}
}; 

然后在页面标签外面应用

最后第三部,激活绑定

$(function () {
var MultiSelect = {};
ko.applyBindings(MultiSelect);
}); 

假定不须要转达参数,这里只须要绑定一个空的viewmodel便可。有人嫌疑了,第三部感应没啥现实意义呢。博主的明确是,DOM元素须要应用data-bind去绑定数据,必须要启用ko的绑定,也就是这里的ko.applyBindings()。

取得效果:

6.2、参数转达

第一步照样自界说ko.bindingHandlers

ko.bindingHandlers.MySelect = {
init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
var oParam = valueAccessor();
$(element).multiselect(oParam);
},
update: function (element, valueAccessor, allBindingsAccessor, viewModel) {
}
};

第二步和下面类似,在html标签外面应用这个自界说绑定。

第三步,在激活绑定的时间传入参数

$(function () {
var MultiSelect = {
enableClickableOptGroups: true,//收起分组
onChange: function (option, checked) {
alert("选择改变");
}
};
ko.applyBindings(MultiSelect);
});

经由历程这三步便可将参数传到我们的MutiSelect的初始化外面:

代码释疑:init事宜的第二个参数,我们说了,它主要作用是取得我们viewmodel外面传已往的参数,只不外这里要把它算作措施应用,为甚么会这么用,尚有待研究!

2、第一个增删改查实例

至此基础的器械终因此铺垫完了,原来盘算一篇弄定的,可以没推想基础的器械睁开来这么多篇幅!增删改查的示例放到下篇,迎接学习交流,虽然也迎接推荐!

php中文网最新课程二维码
  • 相关标签:bootstraptable knockoutjs bootstraptable增删改查
  • 本文原创宣布php中文网 ,转载请注明出处,谢谢您的尊重!
  • 相关文章


  • 原生javascript完因素享到同伙圈功效 支持ios和android_javascript手艺
  • jQuery链式挪用与show知识浅析_jquery
  • JS完成登录页面记着密码和enter键登录措施推荐_javascript手艺
  • BootstrapTable与KnockoutJS相联络完成增删改查功效【一】_javascript手艺
  • BootstrapTable与KnockoutJS相联络完成增删改查功效【一】_javascript手艺
  • 网友议论

    文明上彀理性语言,请遵守 新闻议论服务协定

    我要议论

    独孤九贱(5)_ThinkPHP5视频教程

    ThinkPHP是国际最盛行的中文PHP开发框架,也是您Web项目的最好选择。《php.cn独孤九贱(5)-ThinkPHP5视频教程》课程以ThinkPHP5最新版本为例,从最基本的框架知识泉源,将...

    • 2017-05-16 12:03:57
    • 点击数(176246)

    独孤九贱(4)_PHP视频教程

    华夏棋牌江湖传言:PHP是天下上最好的编程语言。真的是这样吗?这个梗现实是从哪来的?学会本课程,你就会明确了。 华夏棋牌-万豪棋牌电玩城-微信娱乐棋牌出品的PHP入门系统教授修养视频,完全从初学者的角度出发,绝不玩虚的,一切以适用、有用...

    • 2017-03-20 22:47:17
    • 点击数(172075)

    独孤九贱(1)_HTML5视频教程

    华夏棋牌《php.cn原创html5视频教程》课程特点:php中文网原创滑稽段子系列课程,以恶弄,段子为主题气焰气焰的php视频教程!轻松的教授修养气焰气焰,杂乱的教授修养形式,让同砚们在不知不觉中,学会了HTML知识。 ...

    • 2017-03-13 10:15:11
    • 点击数(139607)

    ThinkPHP5实战之[教授修养治理系统]

    华夏棋牌本套教程,以一个真实的黉舍教授修养治理系统为案例,手把手教会您怎样在一张白纸上,从零泉源,一步一步的用ThinkPHP5框架快速开发出一个商业项目。

    • 2017-07-24 16:48:56
    • 点击数(132398)

    PHP入门视频教程之一周学会PHP

    一切盘算机语言的学习都要从根原泉源,《PHP入门视频教程之一周学会PHP》不只是PHP的基础部门更主要的是PHP语言的焦点手艺,是学习PHP必须控制的内容,任何PHP项目的完成都离不开这部门的内容,通...

    • 2016-11-16 14:54:14
    • 点击数(132084)

    作者信息

    php中文网

    认证0级讲师

    比来文章

    相关视频教程

  • javascript低级视频教程
  • jquery 基础视频教程
  • javascript三级联动视频教程
  • 独孤九贱(3)_JavaScript视频教程
  • 独孤九贱(6)_jQuery视频教程
  • 相关视频章节