Knockout js

Knockout.js
一个轻量级的UI类库，通过应用MVVM模式使
JavaScript前端UI简单化

可以把KO当成通过编辑JSON数据来制作UI用户界面的一种方式

官方网站：http://knockoutjs.com

MVVM
Model-View-View Model 是一种创建UI的设计模式。

• model：你程序里存储的数据。
• view model：在UI上，纯code描述的数据以及操作。
• view：一个可见的，交互式的，表示view model状
态的UI。

Knockout的4大概念：
1. 声明式绑定 (Declarative Bindings)
2. UI界面自动刷新 (Automatic UI Refresh)
3. 依赖跟踪 (Dependency Tracking)
4. 模板 (Templating)

Knockout简称：KO

1.创建一个view model，只需要声明任意的JavaScript object。
例如：
var myViewModel = {
firstName: 'Bob',
lastName: 'Smith'
};

2.为view model创建一个声明式绑定的简单view。例如：

The name is <span data-bind="text: personName"></span>

3.激活Knockout

ko.applyBindings(myViewModel);

Observables(监控属性)
var myViewModel = {
firstName : ko.observable('Bob'),
lastName : ko.observable( 'Smith')
};

不需要修改view ，所有的data-bind语法依然工作，不同的是
他能监控到变化，当值改变时，view会自动更新。

监控属性（observables）的读和写

读：firstName() 写：lastName(‘YuanQuan’)

Dependent Observables（依赖监控属性）

添加一个依赖监控属性来返回姓名全称：

viewModel.fullName = ko.dependentObservable(function () {
return this.firstName() + " " + this.lastName();
}, viewModel);

并且绑定到UI的元素上，例如：

The name is <span data-bind="text: fullName"></span>

observable数组
如果探测和响应一个集合的变化，应该用observableArray

pop, push, shift, unshift, reverse, sort, splice
myObservableArray.remove(someItem)
myObservableArray.remove(function(item) { return item.age < 18 })
myObservableArray.removeAll(['Chad', 132, undefined])

内置绑定
1 visible 绑定
使用函数或者表达式来控制元素的可见性

内置绑定
2 text 绑定

KO将参数值会设置在元素的innerText （IE）或textContent
（Firefox和其它相似浏览器）属性上

内置绑定
3 html 绑定

KO设置该参数值到元素的innerHTML属性上，元素之前的内
容将被覆盖。

内置绑定
4 css 绑定

非布尔值会被解析成布尔值。例如， 0和null被解析成false，
21和非null对象被解析成true。

内置绑定
4 css 绑定
如果你想使用my-class class，你不能写成这样：

因为my-class不是一个合法的命名。解决方案是：在my-class
两边加引号作为一个字符串使用。

内置绑定
5 style 绑定
style绑定是添加或删除一个或多个DOM元素上的style值。
比如：当数字变成负数时高亮显示，或者根据数字显示对
应宽度的Bar。

错误： { font-weight: someValue }; 正确： { fontWeight: someValue }

内置绑定
6 attr 绑定
attr 绑定提供了一种方式可以设置DOM元素的任何属性值。
你可以设置img的src属性，链接的href属性。使用绑定，当
模型属性改变的时候，它会自动更新。

错误： { data-url: someValue }; 正确： { “data-url”: someValue }

内置绑定
7 click 绑定

每次点击按钮的时候，都会调用incrementClickCounter()函数，
然后更新自动更新点击次数。

内置绑定
7 click 绑定
你可以声明任何JavaScript函数 – 不一定非要是view model
里的函数。你可以声明任意对象上的任何函数，例如：
obj.someFunction。

有些情况，你可能需要使用事件源对象，Knockout会将这个
对象传递到你函数的第一个参数：

内置绑定
7 click 绑定
默认情况下，KO会阻止默认的事件继续执行。

如果你想让默认的事件继续执行，你可以在你click的自定义
函数里返回true。

防止事件冒泡：

内置绑定
9 更多绑定（不一一列举）

http://knockoutjs.com/documentation/event-binding.html

内置绑定
9 foreach 绑定

afterRender, afterAdd, beforeRemove 回调（可以做动画效果）

内置绑定
10 更多控制流绑定

http://knockoutjs.com/documentation/if-binding.html

Knockout js

More Related Content

What's hot (9)

Viewers also liked (19)

Knockout js