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()varViewModel=function()varself=this;self.userName=ko.observable();;varcurrentViewModuel=newViewModel();//实例化ViewModel对象ko.applyBindings(currentViewModuel);//将实例化对象绑定到当前页面)![这里写图片描述](http://img.blog.csdn.net/20160906141330458)◆3下拉选择框:如果选择框中内容是固定的,可以在html页面写死也可以在服务端页面输出的时候将其绑定好。但是如果是异步加载怎么办?将获得的数组数据拼接成HTML字符串输出到HTML页面中(jquery思路)※jquery思路代码:(拼接复杂)functionSelectOption(arr,weizhi)varstr=“”;for(varobjinarr)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);
})
![这里写图片描述](https://img-blog.csdn.net/20160906141404333)
◆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”
![这里写图片描述](https://img-blog.csdn.net/20160906141425809)
◆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上的标志怎么搞?
-+
新增
![这里写图片描述](https://img-blog.csdn.net/20160906141502443)
◆4 扩展 (在冥王星上加上爱情 )
![这里写图片描述](https://img-blog.csdn.net/20160906141529701)
◆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(“请输入四位阿拉伯数字”);returnfalse;![这里写图片描述](http://img.blog.csdn.net/20160906141602968)◆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);
})
绑定的页面代码
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.