几个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