电商网站开发人员,网络营销试题,怎么利用云盘建设网站,wordpress客户端定制一、引言 之前这个系列文章已经介绍Bootstrap。由于最近项目中#xff0c;前端是Asp.net MVC KnockoutJs Bootstrap来做的。所以我又重新开始写这个系列。今天就让我们来看看Web前端的MVVM框架——KnockoutJs。
二、KnockoutJs是什么#xff1f; 做.NET开发的人应该都知道…一、引言 之前这个系列文章已经介绍Bootstrap。由于最近项目中前端是Asp.net MVC KnockoutJs Bootstrap来做的。所以我又重新开始写这个系列。今天就让我们来看看Web前端的MVVM框架——KnockoutJs。
二、KnockoutJs是什么 做.NET开发的人应该都知道WPF中就集成了MVVM框架关于WPF系列可以参考我WPF系列http://www.cnblogs.com/zhili/category/624221.html。所以KnockoutJs也是针对Web开发的MVVM框架。关于MVVM好处简单点来说就是——使得业务逻辑代码与页面展示代码分割开使得前端项目更好维护。 之前我们写Web页面的时候JS代码和Html代码混合在一起并且代码中充斥着大量的DOM对象的操作。这样代码结构非常混乱。有了MVVM框架了你可以将JS代码和Html代码分割开并且数据操作部分更加简单只需要通过相应的语法data-bind绑定到对应的标签属性显示即可从而加快开发速度。 KnockoutJs也就是这样一个MVVM框架。其实与其称其框架更准备地应该是一个MVVM类库。因为它没有MVVM框架是一个比较“重”的概念其中应该包括路由等特性。而KnockoutJS中却没有相比较AngularJS应该称为一个MVVM框架更加合适。 KnockoutJS主要实现的功能有以下4点
声明式绑定Declarative Bindings使用简单的语法将模型数据关联到DOM元素上。即data-bind语法依赖跟踪Dependency Tracking为转变和联合数据在模型数据之间建立关系。如商品总价是由各个商品项价格之和。此时商品总价和商品项就可以使用依赖跟踪功能来建立关系。即由各个商品项的总价相加而得出。这种关系由KnockoutJs中computed函数完成。UI界面自动刷新(Automatic UI Refresh):当你的模型状态改变时UI界面的将自动更新。这点由observable函数完成。模板(Templating)为您的模型数据快速编写复杂的可嵌套UI。和WPF中模板的概念类似。接下来我们通过具体的例子来让大家快速掌握KnockoutJs的使用。
三、声明式绑定 下面让我们看下如何使用KnockoutJS中的data-bind语法来将模型数据绑定到DOM元素中。
单向绑定!DOCTYPE htmlhtml
headmeta nameviewport contentwidthdevice-width /titleDemo1-单向绑定/titlescript typetext/javascript srchttp://sandbox.runjs.cn/uploads/rs/376/pbcx3e1z/knockout-3.4.0.js/script
/headbody!--单向绑定--divpFirst name: strong data-bindtext: firstName/strong/ppLast name: strong data-bindtext: lastName/strong/ppFirst name: input data-bindvalue: firstName //ppLast name: input data-bindvalue: lastName //p/div!--这段脚本实际项目中应该放在对应的JS文件中然后在html中通过Script标签来引用即可--!--JS代码也就是业务逻辑部分将业务逻辑与Html代码分割开使得View代码更加简洁这样后期也易于维护--script typetext/javascriptfunction ViewModel() {this.firstName Tommy;this.lastName Li;}ko.applyBindings(new ViewModel());/script/body
/html 在线演示地址http://sandbox.runjs.cn/show/4nruobca 2. 上面的例子只是完成了单向绑定的操作。即在上面的例子你会发现当改变input标签中的值并离开焦点时上面的值不会更新。其实KnockoutJS中自动更新功能不会自动添加的需要对应的函数支持这个函数就是observable函数下面具体看看双向绑定的例子 !DOCTYPE htmlhtml
headmeta nameviewport contentwidthdevice-width /titleDemo2-双向绑定/titlescript typetext/javascript srchttp://sandbox.runjs.cn/uploads/rs/376/pbcx3e1z/knockout-3.4.0.js/script
/head
body!--双向绑定--divpFirst name: strong data-bindtext: firstName/strong/ppLast name: strong data-bindtext: lastName/strong/ppFirst name: input data-bindvalue: firstName//ppLast name: input data-bindvalue: lastName //p/divscript typetext/javascriptfunction ViewModel() {this.firstName ko.observable(Tommy);this.lastName ko.observable(Li);}ko.applyBindings(new ViewModel());/script
/body
/html 在线预览地址http://sandbox.runjs.cn/show/oe58jbs3 四、依赖跟踪 接下来让我们看下如何使用KO中的computed函数来完成依赖跟踪。具体例子的实现代码如下所示 !DOCTYPE html
html xmlnshttp://www.w3.org/1999/xhtml
head
meta http-equivContent-Type contenttext/html; charsetutf-8/titleDemo3-依赖跟踪/titlescript typetext/javascript srchttp://sandbox.runjs.cn/uploads/rs/376/pbcx3e1z/knockout-3.4.0.js/script
/head
body!--双向绑定--divpFirst name: strong data-bindtext: firstName/strong/ppLast name: strong data-bindtext: lastName/strong/ppFirst name: input data-bindvalue: firstName //ppLast name: input data-bindvalue: lastName//ppFull name: strong data-bindtext: fullName/strong/pbutton data-bindclick: capitalizeLastNameLastName To Upper/button/divscript typetext/javascriptfunction ViewModel() {this.firstName ko.observable(Tommy);this.lastName ko.observable(Li);// 依赖跟踪this.fullName ko.computed(function () {return this.firstName() this.lastName();},this);// 通过代码改变observable的值this.capitalizeLastName function() {this.lastName(this.lastName().toUpperCase());};}ko.applyBindings(new ViewModel());/script
/body
/html 在线预览地址http://sandbox.runjs.cn/show/t8yokfel 接下来让我们看一下使用声明式绑定和依赖跟踪复杂点的例子。具体示例代码如下 !DOCTYPE html
html xmlnshttp://www.w3.org/1999/xhtml
head
meta http-equivContent-Type contenttext/html; charsetutf-8/titleDemo4-列表绑定/titlescript typetext/javascript srchttp://sandbox.runjs.cn/uploads/rs/376/pbcx3e1z/knockout-3.4.0.js/script
/head
bodytabletheadtrtdName/tdtdAmount/tdtdPrice/td/tr/theadtbody data-bindforeach: itemstrtd data-bindtext: product.name/tdtdselect data-bindoptions:[1,2,3,4,5,6],value: amount/select/tdtd data-bindtext: subTotal/tdtda href# data-bindclick: $root.removeRemove/a/td/tr/tbody/tableh3Order Price: span data-bindtext: price/span/h3button data-bindclick: addComputerAdd a Computer/buttonscript typetext/javascriptvar products [{ name: Learnighard 学习笔记, price: 49 },{ name: 小米Note, price: 999 },{ name: 宏碁笔记本, price: 4999 }];// 订单类function Order() {var self this;this.items ko.observableArray([new Item(products[0], 1),new Item(products[1],2)]);// 订单总价this.price ko.computed(function() {var p 0;for (var i 0; i self.items().length; i) {var item self.items()[i];p item.product.price * item.amount();}return p;}, self);this.remove function(item) {self.items.remove(item);};this.addComputer function () {self.items.push(new Item(products[2], 1));};}// 订单项类function Item(product, amount) {var self this;this.product product;this.amount ko.observable(amount);// 订单项总价this.subTotal ko.computed(function() {return self.amount() * self.product.price;}, self);}ko.applyBindings(new Order());/script
/body
/html 在线预览地址为http://sandbox.runjs.cn/show/109jsjvz
五、模板 看完以上几个例子其实你应该感觉到KOKnockoutJS的简称的上手还是非常简单的。因为其语法都非常容易理解接下来看下KO中模板的使用。 !DOCTYPE html
html xmlnshttp://www.w3.org/1999/xhtml
head
meta http-equivContent-Type contenttext/html; charsetutf-8/titleDemo5-模板绑定/titlescript typetext/javascript srchttp://sandbox.runjs.cn/uploads/rs/376/pbcx3e1z/knockout-3.4.0.js/script
/headbody!--模板绑定div的内容为personTemplate模板内的标签--!--即最终生成如下标签--!--divpName: strong data-bindtext: name/strong/ppAge: strong data-bindtext: age/strong/p/div--div data-bindtemplate:personTemplate/divscript idpersonTemplate typetext/htmlpName: strong data-bindtext: name/strong/ppAge: strong data-bindtext: age/strong/p/scriptscript typetext/javascriptvar ViewModel {name: ko.observable(Tommy),age: ko.observable(28),makeOlder: function() {this.age(this.age() 1);}};ko.applyBindings(ViewModel);/script/body
/html 在线预览地址为http://sandbox.runjs.cn/show/3fnpkvrs !DOCTYPE html
html xmlnshttp://www.w3.org/1999/xhtml
head
meta http-equivContent-Type contenttext/html; charsetutf-8/titleDemo6-模板绑定/titlescript typetext/javascript srchttp://sandbox.runjs.cn/uploads/rs/376/pbcx3e1z/knockout-3.4.0.js/script
/headbodyh2Participants/h2Here are the participants:div data-bindtemplate: { name: persontemplate, foreach: people }/divscript typetext/html idpersontemplateh3 data-bindtext: name/h3pAge: span data-bindtext: age/span/p/scriptscript typetext/javascriptfunction MyViewModel() {this.people [{ name: Tommy, age: 27 },{ name: Frank, age: 33 }];}ko.applyBindings(new MyViewModel());/script/body
/html 在线预览地址为http://sandbox.runjs.cn/show/kujxhfgv 关于模板更多的使用参考官方文档http://knockoutjs.com/documentation/template-binding.html。本文只列出了2中模板的使用。
六、总结 到此KnockoutJs的快速入门的内容就结束了在一篇文章中继续为大家介绍KO内容下一篇文章的内容将介绍如何使用KO来做一个实际的项目。 本文所有源码下载地址https://code.msdn.microsoft.com/KnockoutJs-d9472ff9
