KnockOut前端框架讲解与练习

◆1 KnockOut.js是一个典型的MVVM(Module-View-ViewModule)框架，可以帮助用户创建复杂的前端交换逻辑，简化了与DOM的交互（按照规定绑定对HTML元素写好标记，当HTML元素关联值发生改变时，自动更新HTML状态，使用户可以专注于页面逻辑和数据，而忽略HTML元素之间的动态更新）。KnockOut.js是纯JavaScript框架，独立运行，体积小（压缩后13kb），支持所有主流浏览器（IE6+、Firefox2、Chrome、Safari）。 ◆2 简单的文本输入框绑定 编程思路： 1） 编写一个匿名函数的实例变量，定义指向后创建要检测的属性值（观察者模式） 2） 实例化ViewModuel 3） 将实例化的对象绑定到当前页面 4） 页面上调用data-bind实现绑定。 $(document).ready(function () { var ViewModel = function () { var self = this; self.userName = ko.observable();}; var currentViewModuel = new ViewModel(); //实例化ViewModel对象 ko.applyBindings(currentViewModuel); //将实例化对象绑定到当前页面 })  ◆3 下拉选择框：如果选择框中内容是固定的，可以在html页面写死也可以在服务端页面输出的时候将其绑定好。但是如果是异步加载怎么办？将获得的数组数据拼接成HTML字符串输出到HTML页面中（jquery思路） ※jquery思路代码：（拼接复杂） function SelectOption (arr,weizhi) { var str = “”; for (var obj in arr) { str+=”“+arr[obj]+”“;} weizhi.html(str); } ※knockout思路代码：$(document).ready(function () { var ViewModule = function () { var self = this; self.fruitName = ko.observableArray([“apple”,”orange”,”banana”]); //对应options：fruitName selectedOptions：.DanFruit self.DanFruit = ko.observable(); }; var currentViewModule = new ViewModule(); ko.applyBindings(currentViewModule); })  ◆3 扩展 ko.observableArray([{key:”friut1”,value:”apple”},{key:”friut2”,value:”orange”},{key:”friut3”,value:”banana”}]); data-bind=”options:fruitName, optionsText:’key’,optionsValue:’value’,selectedOptions:DanFruit”  ◆4列表（对于页面上的列表，可以通过服务器端取得数据后循环输出；当数据量比较大时，需要Ajax请求，同时用到页面拼接技术） ※jquery思路代码：（拼接复杂） function RenderPlanets() { var tableBody = $(“#tableBody”); var planetsString = “”; for( var i in Planets){ planetsString+= ““; planetsString += ““+Planets[i].id+”“; planetsString += ““+Planets[i].englishName+”“; planetsString += ““+Planets[i].chineseName+”“; planetsString += ““+Planets[i].description+”“; planetsString+= ““; } tableBody.html(planetsString); } ※knockout思路代码： var ViewModel = function () { var self = this; self.plants = ko.observableArray(Planets); self.newPlanet = function () { self.plants.push({id:10,englishName:”unknow”,chineseName:”未知行”,description:”等待人类去发现”}) return false; }}; var currentViewModel = new ViewModel(); ko.applyBindings(currentViewModel); 那么，我们在html上的标志怎么搞？ -+ 新增  ◆4 扩展 （在冥王星上加上爱情 ）  ◆5 在实例开发时，当需要组合数据类型时怎么办？需要考虑两个问题：数据的格式化和组合类型的数据如何编辑后再显示。 var ViewModel = function(){ var self = this; self.Year = ko.observable(“”); self.Month = ko.observable(“”); self.Day = ko.observable(“”); self.Date = ko.computed(function () { return self.Year()+’-‘+self.Month()+’-‘+self.Day();});}; var currentViewModel = new ViewModel(); ko.applyBindings(currentViewModel); }); 如果有需求，要我们把Date的值读出来，然后在付给一个input边框怎么办？ self.Date = ko.computed({ write: function(value){ var indexOfYear = value.indexOf(‘年’); var indexOfMonth=value.indexOf(‘月’); var indexOfDay=value.indexOf(‘日’); self.Year(value.substring(0,indexOfYear)); self.Month(value.substring(indexOfYear+1,indexOfMonth)); self.Day(value.substring(indexOfMonth+1,indexOfDay)); }, read: function(){ return self.Year()+’年’+self.Month()+’月’+self.Day()+’日’; }, owner:self }); 这个value值是什么？怎么多一个参数出来，可以看出是js框架中读取到的加在data-bind上value值。write加这个属性值是为了可以将属性值进行编辑，read是我们读取到的内容。在write属性中可以对输入的数字值进行设置，限定输入的数字。 if(!/^d[4] $/.test(indexy1)){ alert(“请输入四位阿拉伯数字”); return false; }  ◆6 事件及样式的绑定 需求：点击开赚时底下那个数字会递增（0,1,2,3,4,….）,鼠标移动到点击开赚button时，数字变红，离开后数字恢复成红色。$(document).ready(function () { var viewmodule = function () { var self = this; self.currentNum = ko.observable(0); self.currentAdd = function () { var curr = self.currentNum(); curr++; self.currentNum(curr); }; self.beginColor = ko.observable(“black”);//设置观察的模式颜色 self.moveIn = function () { self.beginColor(“red”); };//鼠标移入时的事件 self.moveOut = function () { self.beginColor(‘black’); }//鼠标移出时的事件 }; var currentvm = new viewmodule(); ko.applyBindings(currentvm); }) 绑定的页面代码