Knockout.js on the way

来源：互联网发布：bad air sponge 知乎编辑：程序博客网时间：2024/05/19 23:10

Knockout.js秉承的是MVVM开发模式，不同于MVC模式，所谓的MVVM（Model View ViewModel）开发模式是通过在view层声明数据绑定来和其他层分离的。详细的MVVM模式可以查看“这里”。

更多的学习资料有：

帅哥的个人网站：http://knockout.com.cn/topic/554b4abc51c2814719118768

帅哥的github：https://github.com/knockoutcn/knockoutcn.github.io/issues/10

Knockout官网：http://knockoutjs.com/documentation/introduction.html

先贴一个DEMO：

<!DOCTYPE HTML><html><head><meta content="text/html, charset=utf-8" /><script type='text/javascript' src='knockout-3.3.0.js'></script> <title>KNOCKOUT JS 练习</title></head><body><input type="text" data-bind="value: firstname" /><br/><input type="text" data-bind="value: lastname" /></body><script type="text/javascript">var vm01 = {// KO使用的JSON格式数据作为VIEW绑定firstname: 'Leo',lastname: 'Zeng'}/** ‘ko’即‘knockout’简称，即类似JQuery中使用‘$’作为声明 */ko.applyBindings(vm01);// 激活Knockout，绑定View Model对象</script></html>

这个简单的Demo实现的就是使用JSON数据作为KO（Knockout.js简称）的在View蹭需要绑定的数据，通过

ko.applyBindings(vm01);// 激活Knockout，绑定View Model对象

将KO这个ViewModel将数据（Model）与View绑定起来，嗯嗯，我是这么理解的。以上的Demo的展示效果即如下：

接着深入。

<!DOCTYPE HTML><html><head><meta content="text/html, charset=utf-8" /><script type='text/javascript' src='knockout-3.3.0.js'></script> <title>KNOCKOUT JS 练习</title></head><body><input type="text" data-bind="value: firstname" disabled="disabled" /><br/><input type="text" data-bind="value: lastname" disabled="disabled" /><hr/><input type="text" data-bind="value: firstname" /><br/><input type="text" data-bind="value: lastname" /><hr/><input type="button" onclick="changeValue()" value="改变值" /></body><script type="text/javascript">var vm01 = {// KO使用的JSON格式数据作为VIEW绑定firstname: ko.observable('Leo'),// 添加 ko.observable() 声明属性值，当该值改变时（焦点离开原来位置），该属性所在的DOM元素中的值会相应的改变lastname: ko.observable('Zeng')// 即达到了自动更新VIEW的目的}ko.applyBindings(vm01);// 激活Knockout，绑定View Model对象<!------------------------->console.log(vm01.firstname() +', '+ vm01.lastname());<!------------------------->function changeValue() {/** 此处值的改变将会直接改变vm01数据中的值 *//** 同时，DOM元素上对应的值也会随之改变 */vm01.firstname('hahahahahaha');vm01.lastname('kekekekekeke');console.log('changeValue后: ' + vm01.firstname() +', '+ vm01.lastname());}</script></html>

以上的Demo注意23、24行，在每个值使用ko.observable()“包装”起来了，其他基本不变。这样，当在下面的input中改变值，当失去焦点后，其上面的input中对应的值也会发生改变（使用“textInput”绑定的时候则即输入即改变），*_*好神奇。

继续。其他代码不变，贴主要代码：

<body><input type="text" data-bind="value: firstname" disabled="disabled" /><br/><input type="text" data-bind="value: lastname" disabled="disabled" /><hr/><input type="text" data-bind="value: firstname" /><br/><input type="text" data-bind="value: lastname" /><hr/><input type="button" onclick="changeValue()" value="ChangeValue" /><br/><hr/>firstname & lastname is <span data-bind="text: fullname" style="color: red;" ></span></body><script type="text/javascript">var vm01 = {// KO使用的JSON格式数据作为VIEW绑定firstname: ko.observable('Leo'),// 添加 ko.observable() 声明属性值，当该值改变时（焦点离开原来位置），该属性所在的DOM元素中的值会相应的改变lastname: ko.observable('Zeng'),// 即达到了自动更新VIEW的目的fullname: ko.observable()}vm01.fullname = ko.pureComputed(function() {return vm01.firstname() + '.' + vm01.lastname();});ko.applyBindings(vm01);// 激活Knockout，绑定View Model对象<!------------------------->console.log(vm01.firstname() +', '+ vm01.lastname());<!------------------------->function changeValue() {/** 此处值的改变将会直接改变vm01数据中的值 *//** 同时，DOM元素上对应的值也会随之改变 */vm01.firstname('Leo changed');vm01.lastname('Zeng changed');console.log('changeValue后: ' + vm01.firstname() +', '+ vm01.lastname());}</script>

注意：不同的DOM显示内容的属性值不同，如<input>的是value，<span>的为text等。

这个Demo的改进即是将firstname和lastname相加，形成fullname，即有一下部分代码完成：

vm01.fullname = ko.pureComputed(function() {return vm01.firstname() + '.' + vm01.lastname();});

哇咔咔、、、

了解更多，中文看帅哥的个人站，英文看官方Documentation，吼吼

继续深入Knockout.js，查看爱编程Knockout.js介绍：http://www.w2bc.com/Article/25175。

0 0