1、Knockout介绍

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

2、下载与安装

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

<scripttype='text/javascript'src='knockout-3.2.0.js'></script>

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

如果你是刚开始学习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 <span data-bind="text: personName"></span>

Observables

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

读取observable属性：myViewModel.personName（）

设置observable属性：myViewModel.personName（""Mary""）

同时设置多个observable属性：myViewModel.personName（""Mary""）.personAge（50）链式语法

Knockout.js学习笔记----介绍相关推荐

Knockout.js学习笔记----绑定
1.Visible绑定 Visible绑定通过绑定一个值来确定DOM元素显示或隐藏: <div data-bind="visible: shouldShowMessage"& ...
WebGL three.js学习笔记 6种类型的纹理介绍及应用
WebGL three.js学习笔记 6种类型的纹理介绍及应用本文所使用到的demo演示: 高光贴图Demo演示反光效果Demo演示(因为是加载的模型,所以速度会慢) (一)普通纹理计算机图形学 ...
ArcGIS JS 学习笔记4 实现地图联动
原文:ArcGIS JS 学习笔记4 实现地图联动 1.开篇守望屁股实在太好玩了,所以最近有点懒,这次就先写个简单的来凑一下数.这次我的模仿目标是天地图的地图联动. 天地的地图联动不仅地图有联动,而 ...
Vue.js 学习笔记六 v-model 双向绑定数据
之前说的v-bind指令,可以绑定数据,但是是单向的,从model向view绑定,下面介绍v-model,可以双向绑定数据 <div id="divApp"><p ...
Vue.js 学习笔记五常用的事件修饰符
介绍几个常用的事件修饰符直接上代码 <div id="divApp"><div class="divColor" v-on:click=&q ...
Vue.js学习笔记 2022 04 17
Vue.js学习笔记 1 Vue.js基础 Vue.js介绍 vuejs 渐进式 JavaScript 框架 Vue.js 如何应用 1 在普通html项目中,引入VUE.JS Hb 的项目生成的 ...
JS学习笔记（九）深拷贝浅拷贝【Array、Object为例】
JS学习笔记(九) 本系列更多文章,可以查看专栏 JS学习笔记文章目录 JS学习笔记(九) 一.赋值&复制二.浅拷贝(shallow copy) 1. 什么是浅拷贝 2. 数组的浅拷贝 ( ...
千锋Node.js学习笔记
千锋Node.js学习笔记文章目录千锋Node.js学习笔记写在前面 1. 认识Node.js 2. NVM 3. NPM 4. NRM 5. NPX 6. 模块/包与CommonJS 7. 常 ...
three.js学习笔记(十八)——调整材质
介绍到现在为止,我们都在创建新的着色器材质,但是如果我们想要修改一个Three.js内置的材质呢?或许我们对MeshStandardMaterial的处理结果感到满意,但是希望往里边添加顶点动画. ...

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

1、Knockout介绍

2、下载与安装

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

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

激活Knockout

Observables

4、监控属性数组（Observables Arrays ）

remove and removeAll

5、applyBinding & Observables

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

applyBindings

Observables

Knockout.js学习笔记----介绍相关推荐

最新文章

热门文章