knockoutjs学习系列一

在VS2012中新建web项目，在Scripts文件夹下面就可以看到knockout-2.3.0.js这个文件， VS自动引入的不是2.3版本的，这个是我用NuGet升级过后的版本，我现在用的也不是2012是2013，在公司电脑上用的是2012，knockout最新版已经是3.0了，官网上可以看到http://knockoutjs.com/downloads/index.html。但是在http://www.nuget.org/packages/knockoutjs/  上最新版是2.3，所以用NuGet最多只能是2.3版本的，估计是NuGet还没来得急更新。

先推荐下我看过的关于knockoutjs 的文章和博客，我这里只是自己做笔记，并不是发表高深的言论，只供自己日后学习参考。

官网Demo和Document http://knockoutjs.com/examples/

大叔的系列文章，不过有点老了，很多接口都变了，可以看下http://www.cnblogs.com/TomXu/archive/2011/11/21/2257154.html

还发现一个系列博客，不过貌似和大叔的差不多，估计有参考过大叔的文章http://www.cnblogs.com/wukong65/category/432506.html

还有一个人用knockoutjs结合easyui做系统的http://www.cnblogs.com/xqin/tag/knockoutjs/

光看不练假把式，开始自己写个demo吧，参照官方文档写，非常easy，必须要引入JQuery和Knockoutjs,这个我没做说明,相信大家都明白

body { font-family: arial; font-size: 14px; }
.liveExample { padding: 1em; background-color: #EEEEDD; border: 1px solid #CCC; max-width: 655px; }
.liveExample input { font-family: Arial; }
.liveExample b { font-weight: bold; }
.liveExample p { margin-top: 0.9em; margin-bottom: 0.9em; }
.liveExample select[multiple] { width: 100%; height: 8em; }
.liveExample h2 { margin-top: 0.4em; font-weight: bold; font-size: 1.2em; }

<div class='liveExample'>   
    <p>First name: <input data-bind='value: firstName' /></p> 
    <p>Last name: <input data-bind='value: lastName' /></p> 
    <h2>Hello, <span data-bind='text: fullName'> </span>!</h2>  
</div>

 // Here's my data model
var ViewModel = function(first, last) {
    this.firstName = ko.observable(first);
    this.lastName = ko.observable(last); 
    this.fullName = ko.computed(function() {// 依赖监控属性(Dependent Observables)d，当firstName 或lastName发生变化的时候就会通知到它，不管谁改变，执行函数都会调用一次，不管改变成什么，他的值都会更新到UI或者其他依赖监控属性上       
        return this.firstName() + " " + this.lastName();//fullName 依赖于firstName 和 lastName
    }, this);
};
//这句话必须，不然ko(knockout)不起作用
ko.applyBindings(new ViewModel("Planet", "Earth")); // This makes Knockout get to work
Edit either text box to see the “full name” display update. See the HTML source code and notice there’s no need to catch “onchange” events. Knockout knows when to update the UI

运行效果就是当你在两个文本框中输入内容，然后文本框是去焦点，界面上会立即更新你输入的信息

学东西我比较欣赏马老师（马士兵）的一句话：“先学脉络再学细节”。先知道这个东西能做什么，然后就是看怎么做，最后就是研究他是怎么做的。 先不管它内部原理是怎么样的，我先弄个demo跑起来再说，先学会用再去深入研究其内部原理。

Demo2，也是演示如何创建一个模型类的。

body { font-family: arial; font-size: 14px; }
.liveExample { padding: 1em; background-color: #EEEEDD; border: 1px solid #CCC; max-width: 655px; }
.liveExample input { font-family: Arial; }
.liveExample b { font-weight: bold; }
.liveExample p { margin-top: 0.9em; margin-bottom: 0.9em; }
.liveExample select[multiple] { width: 100%; height: 8em; }
.liveExample h2 { margin-top: 0.4em; }

<div class='liveExample'>
　　<!--span内容依赖于numberClicks当numberClicks发生变化的时候span里面的内容也会相应变化为numberClicks的值-->     
    <div>You've clicked <span data-bind='text: numberOfClicks'>&nbsp;</span> times</div> 
　　<!--button的点击响应事件是registerClick，button是否可用取决于hasClickedTooManyTimes的值，-->   
    <button data-bind='click: registerClick, disable: hasClickedTooManyTimes'>Click me</button>
　　<!---这个层是否显示也取决于hasClickedTooManyTimes的值，这个值发生改变这里也会立即更新UI-->     
    <div data-bind='visible: hasClickedTooManyTimes'>
        That's too many clicks! Please stop before you wear out your fingers.
　　　　　<!--这个button的响应事件是resetClicks， 一旦点击就会重置点击次数，重置点击次数后点击按钮立马变成可用的了-->
        <button data-bind='click: resetClicks'>Reset clicks</button>
    </div>        
</div>

var ClickCounterViewModel = function() {
    this.numberOfClicks = ko.observable(0);//监控属性，能够通知订阅者它的改变以及自动探测到相关的依赖，代码写成data-bind='text: numberOfClicks' 
　　text绑定注册到自身，一旦numberOfClicks的值改变，它就能得到通知

　　this.registerClick = function() { this.numberOfClicks(this.numberOfClicks() + 1); }; 
　　this.resetClicks = function() { this.numberOfClicks(0); }; 
　　this.hasClickedTooManyTimes = ko.computed(function(){// 老版本是这样写的ko.dependentObservable
　　　　return this.numberOfClicks() >= 3; 
　　}, this);
}; 

//激活Knockout 这个代码最好放到$(function(){//code});里面 以便是 ko加载完成
 ko.applyBindings(new ClickCounterViewModel());

运行效果如上图，当点击超过三次的时候就会有提醒，点击按钮立马变成不可用，当点击重置，点击按钮立即变成可用状态，并且点击次数的显示也立即变为0。 一切感觉是那么的神奇，上面一个例子是文本框的值变了界面的值会跟着变，下面这个demo是改变内部viewmodel的值UI的值也立即得到更新，感觉有点想WPF的依赖属性。弄了两个demo来玩玩，貌似对MVVM有点感觉了， Model→View→View→Model， 可以实现双向绑定，同步变化。

Knockout有四大理念，分别是1、声明式绑定 (Declarative Bindings)2、UI界面自动刷新 (Automatic UI Refresh) 3、依赖跟踪(Dependency Tracking)  4、模板(Templating)

弄了两个demo其实已经用到了其中的

声明式绑定 (Declarative Bindings)：使用简明易读的语法很容易地将模型(model)数据关联到DOM元素上。
UI界面自动刷新 (Automatic UI Refresh)：当您的模型状态(model state)改变时，您的UI界面将自动更新。
依赖跟踪 (Dependency Tracking)：为转变和联合数据，在你的模型数据之间隐式建立关系。

今天初次研究Knockout，先是在网上看了其他人写的文章，然后看了下官方网站，是英文的，又是老外搞出来的（中国人没那么多时间和精力，都为生计在奔波，可以理解），不过没什么高深的，基本都看得懂，专业术语先去博客园看看大牛们写的文章就已经心中有数了。然后自己写了几个demo，尝试了一下，接下来继续研究怎么使用的，希望能够集成到项目开发中去，提高我的开发效率，提高生产力。