KnockoutJS教程

KnockoutJS - Observables

KnockoutJS建立在以下3个重要概念之上.

它们之间的可观察性和依赖性跟踪 - DOM元素已连接通过'data-bind'到ViewModel.他们通过Observables交换信息.这会自动处理依赖关系跟踪.
UI和ViewModel之间的声明性绑定 - DOM元素通过"data-bind"概念连接到ViewModel.
创建可重复使用组件的模板 - 模板提供了一种创建复杂Web应用程序的可靠方法.

我们将在本章中研究Observable.

正如名称所指定的那样，当您将ViewModel数据/属性声明为Observable时，每次都会自动反映任何数据修改在所有地方使用数据.这还包括刷新相关的依赖项. KO负责这些事情并且不需要编写额外的代码来实现这一目标.

使用Observable，可以很容易地使UI和ViewModel动态通信.

语法

您只需要使用函数 ko.observable()声明ViewModel属性，使其成为Observable.

this.property = ko.observable('value');

示例

让我们看看以下示例，该示例演示了Observable的使用.

<!DOCTYPE html>
   <head>
      <title>KnockoutJS Observable Example</title>
      <script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js" 
         type = "text/javascript"></script>
   </head>
   
   <body>
      <!-- This is called "view" of HTML markup that defines the appearance of UI -->

      <p>Enter your name: <input data-bind = "value: yourName" /></p>
      <p>Hi <strong data-bind = "text: yourName"></strong> Good Morning!!!</p>

      <script>
         <!-- This is called "viewmodel". This javascript section defines the data and behavior of UI -->

         function AppViewModel() {
            this.yourName = ko.observable("");
         }

         // Activates knockout.js
         ko.applyBindings(new AppViewModel());
      </script>
   </body>
</html>

以下行是输入框.可以看出，我们使用data-bind属性将yourName值绑定到ViewModel.

<p>Enter your name: <input data-bind = "value: yourName" /> <p>

以下行只打印yourName的值.注意，这里数据绑定类型是文本，因为我们只是读取值.

<p>Hi <strong data-bind = "text: yourName"></strong> Good Morning!!!</p>

在以下行中，ko.observable会密切关注yourName变量以进行数据修改.一旦进行了修改，相应的位置也会使用修改后的值进行更新.运行以下代码时，将出现一个输入框.当您更新该输入框时，新值将在任何使用它的地方反映或刷新.

this.yourName = ko.observable("");

输出

让我们执行以下步骤，了解上述代码的工作原理和减号;

将以上代码保存在 first_observable_pgm.htm 文件中.
在浏览器中打开此HTML文件.
输入名称为Scott，并观察该名称是否反映在输出中.

可以从UI或ViewModel进行数据修改.无论数据在何处更改，UI和ViewModel都会在它们之间保持同步.这使它成为一种双向约束机制.在上面的示例中，当您在输入框中更改名称时，ViewModel将获取一个新值.当您从ViewModel内部更改yourName属性时，UI会收到一个新值.

读取和编写Observables

下表列出了读写可以在Observables上执行的操作.

Sr.No.	读/写操作&语法
1	阅读要读取值，只需调用不带参数的Observable属性，例如:AppViewModel.yourName();
2	写要在Observable属性中写入/更新值，只需在参数中传递所需的值，如:AppViewModel.yourName('Bob');
3	写多个多个借助于链接语法，可以在一行中更新ViewModel属性，如:AppViewModel.yourName('Bob').yourAge(45);

Sr.No.

读/写操作&语法

阅读

要读取值，只需调用不带参数的Observable属性，例如:AppViewModel.yourName();

写

要在Observable属性中写入/更新值，只需在参数中传递所需的值，如:AppViewModel.yourName('Bob');

写多个

多个借助于链接语法，可以在一行中更新ViewModel属性，如:AppViewModel.yourName('Bob').yourAge(45);

可观察数组

可观察声明负责单个对象的数据修改. ObservableArray使用对象集合.当您处理包含多种类型值的复杂应用程序并根据用户操作频繁更改其状态时，这是一个非常有用的功能.

语法

this.arrayName = ko.observableArray();//它是一个空数组

可观察数组仅跟踪添加或删除其中的对象.它不会通知单个对象的属性是否被修改.

首次初始化

您可以同时初始化阵列您可以通过将初始值传递给构造函数来将其声明为Observable，如下所示.

this.arrayName = ko.observableArray(['scott','jack']);

从Observable Array读取

您可以按如下方式访问Observable数组元素.

alert('The second element is ' + arrayName()[1]);

ObservableArray函数

KnockoutJS有自己的一组Observable数组函数.它们很方便，因为 :

这些功能适用于所有浏览器.
这些函数将自动处理依赖关系跟踪.
语法易于使用.例如，要将元素插入数组，只需使用arrayName.push('value')而不是arrayName().push('value').

以下是各种Observable Array方法的列表.

Sr.No.	方法&说明
1	push('value') 在数组末尾插入一个新项目.
2	pop() 从数组中删除最后一项并将其返回.
3	unshift('value') 在数组的开头插入一个新值.
4	shift() 从数组中删除第一项并将其返回.
5	reverse() 撤销订单数组.
6	sort() 按升序对数组项进行排序.
7	splice(start-index,end-index) 接受2个参数 - start-index和end-index - 从start开始删除项目结束索引并将它们作为数组返回.
8	indexOf('value') 此函数返回第一次出现参数的索引.
9	slice(start-index，end-index) 这切出一个数组的方法.返回从start-index到end-index的项目.
10	removeAll() 删除所有项目和将它们作为数组返回.
11	删除('值') 删除与参数匹配的项目并返回作为数组.
12	删除(功能(项目){条件}) 删除项目满足条件并将它们作为数组返回.
13	删除([价值组合]) 删除与给定值集匹配的项.
14	destroyAll() 标记具有属性_destroy且值为true的数组中的所有项.
15	销毁('值') 搜索等于参数的项目并用特殊标记属性_destroy，其值为true.
16	destroy(function(item){condition}) 查找满足条件的所有项目，用属性_destroy标记它们为true价值.
17	destroy([值集]) 查找与给定值集匹配的项，将它们标记为_destroy，并带有true值.