几个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元素要获取的内容和事件已经绑定好了 如果元素的内容或者属性有变化,不需要再查找元素,更改属性,直接修改绑定的变量,数组和事件,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包裹,也可以用纯jswindow.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

 

监控数组

 

监控数组的定义:使用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;

   }

});

 

从小到大还是从大到小就是调整-11的位置

因为数组的上述方法都是可以直接改变数组的,所以我们可以用self.arr().方法()直接使用,但是无论字符串还是数字都没有可以改变自身的方法,所以就不能这样更新了。

 

其实监控变量还是监控数组本质都可以用self.content(self.content()变化)来更新获取都是用self.content()来获取

 

 

 

原文来自:博客园/Wiesler

展开阅读全文

没有更多推荐了,返回首页