必学的KNOCKOUT.JS 框架使用方法
最近一直在使用和学习KNOCKOUT.JS。有了一些心得体会就把它们总结了出来。Knockout js 使用心得条目如下：
1 knockout js是个轻量级的js框架，在knockout官网下载之后，可以引入自己的html中。knockout js的使用并不需要jQuery配合，但我们也可以在jQuery之后自己的js文件之前引入knockoutjs
2 knockout js是一个MVVM(Model View Viewmodel)框架, 其他还有MVC(Controller)，MVP(Presenter)框架
3 knockout js 是创建一些监控变量和监控数组和事件，并将这些变量，数组，事件通过data-bind属性统统绑定在html上。
好处：1省去了在js文档中要写绑定和获取元素的烦恼，因为某个html元素要获取的内容和事件已经绑定好了 2 如果元素的内容或者属性有变化，不需要再查找元素，更改属性，直接修改绑定的变量，数组和事件，html元素就会动态地更新
4 knockout的引入:
<script type="text/javascript" src="./js/jquery-2.2.3.js"></script>
<script src="./js/knockout-3.4.0.js"></script>
<script type="text/javascript" src="./js/demou1.js"></script>
5 knockout的结构：
在js文件中，需要引入的初始数据(一般来说都是不变的数据)都可以在model外定义，可变的数据都要定义在model内部
var variable1 = "...";var variable2 = "...";var variableArray = ["..."];var variableObject = {};/*...一系列初始量的定义, 这些值是作为外部数据，要传入这个model的...*/function ViewModel(){
var self = this;//将this赋值给self，这样方便内部不同域时使用this
/*
* 自己定义的监控变量，监控数组，还有事件写在这里
*/
}
ko.applyBindings(new ViewModel());
最后需要应用这个ViewModel，注意每个项目只可以应用一次这个Model
严重注意一点：如果在body的末尾引入script，那么就可以直接向上边这样写代码了；如果在头部引入(推荐)，那么就需要将所有代码包裹起来(让DOM树结构完整了再运行代码)，两种方法，可以用jQuery包裹，也可以用纯js的window.addEventListener(“load”, function(){}, false)来包裹，个人觉得第二个更好，少用jQuery可以节省运行时间
window.addEventListener("load", function(){
/*...所有代码...*/
}, false);
$(function(){
/*...所有代码...*/
});
6监控变量：
监控变量的定义
self.variable1 = ko.observable("...");
self.variable2 = ko.observable(100);
self.variable3 = ko.observable(variable1);
self.variable4 = ko.observable({
name: "alex",
age: 18
});
这个括号里面就是这个监控变量的值，这个值可以是字符串，可以是数字。这样的话，模型就会实时监控这个变量，任何html元素使用了这个变量，当我们在模型中改变这个变量的时候，html中的值就会改变。
监控变量的值获取
var value = self.variable1();
注意，值后边一定要有括号，因为监控的本质是个函数，执行这个函数会返回所监控的内容
这个括号里还可以写外部定义的字符串或数字
监控变量的值更新
self.variable1("abc");
self.variable2(self.variable2() + 1);
self.variable1().school = "123"
在括号内赋值，或者改变数值，来更新监控变量。注意第二个，更新的时候是在原有的上边加1
7 监控数组
监控数组的定义：使用ko.observableArray()来定义
self.arr = ko.observableArray([]);
self.arr1 = ko.observableArray([{}, {}, {}]);
self.arr2 = ko.observableArray(variableArray);
监控数组里面可以放空数组，可以放对象组成的数组，可以把模型外的数组引入
注意，如果想使用对象，也推荐将对象作为数组的元素来使用，方便用foreach:绑定，如果只是想用对象的话，也可以用ko.observable()来监控
监控数组的获取
var array = self.arr();
必须要有括号。获取到的是数组，也就是之前括号里面的监控的值
监控数组的更新
self.arr([{
"name": "Lee"
}, {
"name": "alex"
}])
当然监控数组也可以用js的数组方法来更新，
比如self.arr.push(123) 和 self.arr().push(123)效果一样的，不过推荐后者，与监控变量一样的方法，更清晰。
监控数组可以用的方法比如.push() .pop() .unshift() .shift() .slice() .reverse() .sort() .splice()
注意.sort()方法，我们知道排序时必须要传一个比大小的函数，不然会按照字符串来比较
self.arr().sort(function(a, b){
if(a < b){
return -1;
}else{
return 1;
}
});
从小到大还是从大到小就是调整-1和1的位置
因为数组的上述方法都是可以直接改变数组的，所以我们可以用self.arr().方法()直接使用，但是无论字符串还是数字都没有可以改变自身的方法，所以就不能这样更新了。
其实监控变量还是监控数组本质都可以用self.content(self.content()变化)来更新, 获取都是用self.content()来获取
原文来自:博客园/Wiesler