Knockout学习之(1)

监控属性


Knockout包含以下三个核心特性:

1.监控属性和依赖跟踪

2.显式绑定

3.模板

下面我们将学习这三点中的第一点,在这之前我们先研究下MVVM模式和视图模型的概念。

MVVM和视图模型


模型:用来存储应用中的数据。它处于业务领域中,并且包含了相关的属性以及操作,与用户界面独立。在使用OK时,你将经常使用ajax保持该模型与服务端同步。

视图模型:使用纯代码表示界面的数据和操作。比如,你要实现一个列表编辑功能,那么你的视图模型就需要维持一组数据项,同时还要提供添加和删除方法。

视图:能够通过可视和可交互的方式呈现视图模型。它可以显示来自视图模型中的数据,也能将用户操作的命令传递给视图模型。

当你使用了KO,你的视图只需要由简单的html文档和显式绑定就可以轻松的连接到视图模型,或者你还可以使用模板配合视图模型中的数据生成html代码。

下面我们使用KO创建一个视图模型:

你可以使用依赖绑定去创建一个非常简单的视图去呈现该视图模型。例如,下面的代码将显示personName的值:

使用knockout执行绑定


虽然data-bing并不是HTML中原生态的属性,但是它不会有任何问题。浏览器也无法知道它的含义,所以你需要使用knockout使其有效果。

下面我们将使用knockout执行绑定:

打开页面你将看到和下面的html一样的结果:

下面是关于applyBindings参数的说明:

第一个参数是你想激活依赖绑定的视图模型

第二个参数是可选的,主要是用来规定需要绑定的视图对象,比如我们可以这么写ko.applyBindings(myViewMode,document,getElementById(‘someElementId’))。

监控属性


现在你已经会创建基本的视图模型了,下面我们还要学习如何监控视图模型中的数据,从而可以在视图模型中的数据发生改变的时候将视图也改变。

下面我们将之前的视图模型改写:

现在你不需要手动保持视图的更新,这些会由knockout帮你自动更新。一旦视图模型的被监控的属性发生改变对应的视图也会随之改变。

读取和写监控属性

读取为当前命名为该属性名称的函数,不含有任何参数。

写为当前命名为该属性名的函数,并加上需要赋的值。

显式订阅监控属性事件


虽然knockout帮我们自动更新了视图,但是有时候我们需要对传入的值进行判断,那么我们就需要订阅这个事件。

下面我们可以通过subscribe进行订阅:

下面是关于该函数的参数说明:

第一个参数是指定回调的函数,第二个参数是可选的,用来指定回调函数执行的上下文,第三个参数是需要订阅的事件类型(默认为change,另一个是beforeChange)。

同时该函数还会返回一个对象,我们可以通过该返回值取消订阅,比如下面所示的代码:

Knockout默认情况下,如果赋的值跟当前属性的值相同,是不会触发change事件的,但是有时我们需要让其也能够触发,那么我们可以加上如下的代码:

延迟触发事件


笔者看到这个一时还不知道具体运用在哪,这里就顺便带以下吧,主要跟上面的方式相同,时间是毫秒:

下面是笔者的测试代码:

 1 <input type="text" data-bind="value: personName" />
2
3 <script type="text/javascript">
4 var myViewModel = {
5 personName: ko.observable("Job"),
6 personAge: ko.observable(123)
7 };
8
9 //myViewModel.personName.extend({ notify: "always" });
10
11 myViewModel.personName.extend({ rateLimit: 1000 });
12
13 myViewModel.personName.subscribe(function (oldValue) {
14 console.log("the old value is " + oldValue);
15 }, null, "beforeChange");
16
17 myViewModel.personName.subscribe(function (newValue) {
18 console.log("the new value is " + newValue);
19 });
20
21 myViewModel.personName("Job");
22
23 myViewModel.personName("Job");
24
25 ko.applyBindings(myViewModel);
26 </script>

Knockout学习之(1),布布扣,bubuko.com

时间: 2024-10-12 19:00:47

Knockout学习之(1)的相关文章

Knockout学习笔记(三)

之前的文章主要针对的是单一的observable(即便是observableArray也是一种observable),而文档Using computed observables则主要是针对ko.computed这一function,它能够将多个observable联系起来,无论这些observable中的哪个发生了变化,ko.computed也会发生相应的变化并将结果反应在UI中. 首先,创建一个view model如下: 1 function MyViewModel() { 2 this.fi

Knockout学习笔记(二)

这篇文章主要用于记录学习Working with observable arrays的测试和体会. Observable主要用于单一个体的修改订阅,当我们在处理一堆个体时,当UI需要重复显示一些样式相同的元素时,这些数据的绑定就需要依靠observable arrays. 特别需要注意的一点是,observable arrays关注的是数组中元素整体的变化(包括增加元素,删减元素,元素顺序的改变等等),而不是元素个体的变化(元素内部某些部分的改变). 我们可以在js文件中创建一个observab

Knockout学习之(2)

组合监控属性 顾名思义,就是我们可以将多个属性合并为一个属性.这样在显示的时候就是整体了,并且其中任何一个属性发生改变,这个属性也都会随之发生改变从而更新视图,而这些只需要使用computed函数就可以实现,比如下面的代码我们将firstName和lastName合并为fullName属性,并呈现: 1 <span data-bind="text: fullName" /> 2 3 <script type="text/javascript">

Knockout学习之表单绑定器(上)

表单绑定器 “click”绑定 Click 绑定器可以将javascript函数绑定到指定的dom元素,并且再该元素被点击时将触发绑定的函数,大多数情况下都会使用button.input和a元素,当然其他可见的dom元素也是一样可以的.下面我们就简单的举一个例子: 1 <div> 2 你已经点击了<span data-bind="text:numberOfClicks" ></span> 3 <button data-bind="cl

Knockout学习之表单绑定器(下)

“hasFocus”绑定 hasFocus绑定器会将DOM元素的焦点状态与视图模型中的属性相关联,当你设置视图模型中关联的属性为true或false后,将能够设置关键的DOM元素是否获得焦点. 比如下面的例子将会演示如何使用通过代码设置焦点,并且当关联的标签获得焦点后显示一段文本: 1 <div> 2 <input type="text" data-bind="hasfocus: focusState" /> 3 <button typ

Knockout学习笔记(四)

由于Writable computed observables和How dependency tracking works的要求相对较高,我先跳过这两篇,学习Pure computed observables. Pure computed observables相对于一般的computed observables,在性能和存储上有优势,这是因为pure computed observables在不存在订阅者的时候是不会保持订阅关系的.这也使得pure computed observables有如

Knockout学习之文本和外观绑定器

文本和外观绑定器 “visible”绑定 该绑定主要用来让我们通过监控属性可以控制html文档的显示,只要绑定的监控属性为false.0.null或者undefined则隐藏该标签,否则显示.比如下面的示例: 1 <span data-bind="visible:visibleState">显示了</span> 2 <div> 3 <button type="button" data-bind="click:sho

knockout学习资料

一个靠谱的哥们整理的Knockout学习资料 Knockout学习之监控属性 Knockout学习之组合监控属性 Knockout学习之监控数组 Knockout学习之文本和外观绑定器 Knockout学习之控制流绑定器 Knockout学习之表单绑定器(上) Knockout学习之表单绑定器(下) Knockout学习之模板绑定器

Knockout学习之控制流绑定器

控制流绑定器 “foreach”绑定 顾名思义,通过该绑定我们就可以将监控数组循环输出到页面中去了,当然我们还是先来段简单的示例,仅仅只是输出监控数组: 1 <ul data-bind="foreach:people" > 2 <li data-bind="text:Name"></li> 3 </ul> 4 5 6 <script type="text/javascript"> 7 8