Knockout.js学习笔记----介绍

1、Knockout介绍

Knockout是一款很优秀的JavaScript库,它可以帮助你仅使用一个清晰整洁的底层数据模型(data model)即可创建一个富文本且具有良好的显示和编辑功能的用户界面。任何时候你的局部UI内容需要自动更新(比如:依赖于用户行为的改变或者外部的数据源发生变化),KO都可以很简单的帮你实现,并且非常易于维护。

2、下载与安装

下载地址:http://knockoutjs.com/downloads/index.html

下面你就可以开始使用了。

如果你是刚开始学习Knockout,你可以先从互动式教学开始,看一些在线实例,或者仔细的阅读监控属性相关的帮助文档。

互动式教学地址:http://learn.knockoutjs.com/

在线实例:http://knockoutjs.com/examples/

帮助文档:http://knockoutjs.com/documentation/introduction.html

3、创建数据模型(View Models )和监控属性(Observables)

Knockout是建立在以下3个核心功能之上的:

1、 属性监控与依赖跟踪

2、 声明式绑定

3、 模版机制

激活Knockout

ko.applyBindings(myViewModel);

Observables

上面,你已经看到如何创建一个基本的数据模型以及如何利用绑定来显示它的属性。但是KO最重要的一个属性就是当View Model发生变化时能够自动的更新UI界面。KO是如何能够知道你的View Model已经发生改变了呢?答案是:你需要将你的model属性声明成observable的, 因为它是非常特殊的JavaScript 对象,能够通知用户它的改变以及自动检测依赖关系。

var myViewModel = {
personName: ko.observable('Bob'),
personAge: ko.observable(123)
};

4、监控属性数组(Observables Arrays )

如果你想发现并响应一个对象的改变,就应该用监控属性(observables)。如果你想发现并响应一个集合的变化,就该用监控属性数组(observableArray)。监控属性数组在显示或编辑多个值以及对界面的一部分重复显示或隐藏(如添加删除条目)等多种情况下 都是很有用的。

如果我们想要使用Knockoutjs表示多个值的话我们可以使用数组监控(Observable Arrays)来表示,形式如下:

var myObservableArray = ko.observableArray(); 
myObservableArray.push('Some value');myObservableArray.push('Some value');

在第一行我们实例化了一个数组,在第二行我们向此数组中添加了一条记录,正如我们看到的那样,往数组中添加数组我们使用push方法。当然我们也可以在初始化数组的时候为其赋初值,代码如下:

var anotherObservableArray = ko.observableArray([  
{name: "Bungle", type: "Bear" }, 
{name: "George", type: "Hippo" },
{name: "Zippy", type: "Unknown" }
]);  

Knockoutjs数组常用的方法如下:

(1)、myObservableArray.push('Some new value'):增加一个新的元素

(2)、myObservableArray.pop():删除一个元素,并返回其值

(3)、myObservableArray.unshift('Some new value'):在数组的开始处增加一个新的元素

(4)、myObservableArray.shift():删除数组的第一个元素,并返回其值

(5)、myObservableArray.reverse():反转数组的顺序

(6)、myObservableArray.sort():数组排序。

(7)、myObservableArray.splice():数组截取。例如:myObservableArray.splice(1, 3),代表从数组的第一个元素开始,截取三个元素,并且将他们作为数组返回。

remove and removeAll

observableArray 增加了一些更有用的方法,而且是Js数组没有的

myObservableArray.remove(someItem)移除myObservableArray数组内所有匹配someItem的对象, 并把这些对象组成一个数组返回

myObservableArray.remove(function(item) { return item.age < 18 })移除myObservableArray数组内所有年龄属性小于18的对象,并返回这些对象组成的新数组

myObservableArray.removeAll(['Chad', 132, undefined])移除myObservableArray数组内所有匹配'Chad',123, orundefined 的对象并把它们组成新数组返回

myObservableArray.removeAll()移除myObservableArray数组内所有数据,并返回这些数据组成的一个新数组。

 

5、applyBinding & Observables

一般的数据绑定有三种:One-Time,One-Way,Two-way。

One-Time绑定模式的意思即为从viewModel绑定至UI这一层只进行一次绑定,程序不会继续追踪数据的在两者中任何一方的变化,这种绑定方式很使用于报表数据,数据仅仅会加载一次。

One-Way绑定模式即为单向绑定,即object-UI的绑定,只有当viewModel中数据发生了变化,UI中的数据也将会随之发生变化,反之不然。

Two-Way绑定模式为双向绑定,无论数据在Object或者是UI中发生变化,应用程序将会更新另一方,这是最为灵活的绑定方式,同时代价也是最大的。数据绑定只是作为元素的自定义属性写上标签内,并不能决定它是何种绑定。

如果值是通过ko.observable定义的说明是双向绑定,否则为One-Time绑定,在knockout不存在单向绑定。

applyBindings

// Knockout调用applyBindings激活myViewModel(即把myViewModel和View中的声明式绑定data-bind接洽关系起来) 
ko.applyBindings(myViewModel); 
// 限制只在指定对象someElementId和后代节点中进行激活操纵。 
ko.applyBindings(myViewModel, document.getElementById(""someElementId"")); 
personName: ko.observable(""Bob""), 
// 静态绑定
The name is  

Observables

并不是所有的浏览器都支撑JavaScript的getters和setters办法(IE),是以从兼容性推敲,ko.observable是function。

读取observable属性:myViewModel.personName()

设置observable属性:myViewModel.personName(""Mary"")

同时设置多个observable属性:myViewModel.personName(""Mary"").personAge(50) 链式语法

你可能感兴趣的:(技术方案)