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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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