Knockout学习教程

Knockout介绍

Knockout.js是什么？Knockout是一款很优秀的JavaScript库，它可以帮助你仅使用一个清晰整洁的底层数据模型（data model）即可创建一个富文本且具有良好的显示和编辑功能的用户界面。任何时候你的局部UI内容需要自动更新（...

下载与安装

Knockout的核心类库是纯JavaScript代码实现的，不依赖任何其他类库，所以按照如下步骤即将KO添加到你的项目里：下载Knockout的最新版本，在正式开发和产品使用中，推荐使用默认的压缩版本（knockout.x.x.js）下载地址：http:...

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

Knockout是建立在以下3个核心功能之上的:1、属性监控与依赖跟踪 2、声明式绑定 3、模版机制在本节中，我们将学习3个核心里面的第一个。但在这之前，先让我们学习一下MVVM设计模式和View Model的概念。Model-View-View Mo...

监控属性数组（Observables Arrays ）

如果你想发现并响应一个对象的改变，就应该用监控属性（observables）。如果你想发现并响应一个集合的变化，就该用监控属性数组（observableArray）。监控属性数组在显示或编辑多个值以及对界面的一部分重复显示或隐藏（如添加...

使用计算属性上（Computed Observable）

计算属性 Computed Observable如果你已经有了一个监控属性firstName和lastName,如果你想显示全名该怎么做呢？这个时候你就可以通过计算属性来实现，这个方法依赖于一个或多个监控属性，如果任何依赖对象发生改变他们就...

使用计算属性中（Computed Observable）

可写的计算属性初学者可以跳过这一小节，可写的计算属性相对来说比较高级，在大多数情况下也是没有必要的。正如你上面所学的，计算属性是通过计算其他监控属性而得到的一个值。从这个意义上说，计算属性通常情况下是只读的...

使用计算属性下（Computed Observable）

依赖跟踪是如何工作的初学者可以不必知道这一点，但是高级开发人员可以通过这节来了解依赖监控属性可以通过KO自动跟踪并被更新到UI上。事实上它是很简单的，甚至简单的有点可爱，跟踪算法是这样的：1、当你声明一个依赖...

applyBinding & Observables

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

Visible绑定

目的 Visible绑定通过绑定一个值来确定DOM元素显示或隐藏示例<div data-bind="visible: shouldShowMessage"> You will see this message only when "shouldShowMessage" holds a true value. </div> <script type="...

Text绑定

目的 Text绑定主要是让DOM元素显示参数值。通常情况下，该绑定在<span>和<em>这样的元素上非常有用，而实际上你可以绑定任何元素。示例Today's message is: <span data-bind="text: myMessage"></span> <script type="...

html绑定

目的 html绑定到DOM元素上，使得该元素显示的HTML值为你绑定的参数。如果在你的view model里声明HTML标记并且render的话，那非常有用。例子 <div data-bind="html: details"></div> <script type="text/javascript"> v...

CSS类名绑定

目的 css绑定是添加或删除一个或多个CSS class到DOM元素上。非常有用，比如当数字变成负数时高亮显示。（注：如果你不想应用CSS class而是想引用style属性的话，请参考style绑定。）例子 <div data-bind="css: { profitWa...

Style属性绑定

目的 style绑定是添加或删除一个或多个DOM元素上的style值。比如当数字变成负数时高亮显示，或者根据数字显示对应宽度的Bar。（注：如果你不是应用style值而是应用CSS class的话，请参考CSS绑定。）例子 <div data-bind="st...

attr属性绑定

这个绑定可以用于给DOM元素添加自定义属性，或绑定到已有的属性：目的 attr 绑定提供了一种方式可以设置DOM元素的任何属性值。你可以设置img的src属性，连接的href属性。使用绑定，当模型属性改变的时候，它会自动更新。例子...

foreach绑定

目的使用此功能可以方便我们循环遍历输出某个数组、集合中的内容。实例（1）、循环遍历输出数组<script type="text/javascript" src="knockout-2.2.0.js"></script><table> <thead> <tr><th>First name</th><th>Last nam...

if绑定

（1）、使用if binding可以控制某个组件动态显示，类似我们之前接触到的visible属性，不过此属性绑定过以后就不能更改，而if binding可以根据相应的条件控制组件是否显示，下面是一个简单的例子： <script type="text/java...

with绑定

我们可以使用with binding来重新定义一个上下文绑定，比如： <script type="text/javascript" src="knockout-2.2.0.js"> </script> <h1 data-bind="text: city"> </h1> <p data-bind="with: coords">Latitude:<span d...

click绑定

目的 click绑定在DOM元素上添加事件句柄以便元素被点击的时候执行定义的JavaScript 函数。大部分是用在button，input和连接a上，但是可以在任意元素上使用。例子 <div>You've clicked<span data-bind="text: numberOfCl...

event绑定

目的 event绑定在DOM元素上添加指定的事件句柄以便元素被触发的时候执行定义的JavaScript 函数。大部分情况下是用在keypress，mouseover和mouseout上。例子 <div><div data-bind="event: { mouseover: enableDetails, ...

submit绑定

目的 submit绑定在form表单上添加指定的事件句柄以便该form被提交的时候执行定义的JavaScript 函数。只能用在表单form元素上。当你使用submit绑定的时候， Knockout会阻止form表单默认的submit动作。换句话说，浏览器会...

value 绑定

目的 value绑定是关联DOM元素的值到view model的属性上。主要是用在表单控件<input>，<select>和<textarea>上。当用户编辑表单控件的时候， view model对应的属性值会自动更新。同样，当你更新view model属性的时候，相对...