KnockoutJS - Observables

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

Observables 和它们之间的依赖跟踪 - DOM 元素通过“data-bind”连接到 ViewModel。他们通过 Observables 交换信息。这会自动处理依赖性跟踪。
UI 和 ViewModel 之间的声明性绑定 - DOM 元素通过“数据绑定”概念连接到 ViewModel。
通过模板创建可重用组件 - 模板提供了一种创建复杂 Web 应用程序的强大方法。

我们将在本章中研究可观察量。

顾名思义，当您将 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 执行的读取和写入操作。

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

先生。

读/写操作和语法

读

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

写

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

写多个

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

可观察数组

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

句法

this.arrayName = ko.observableArray();    // It's an empty array

Observable 数组仅跟踪其中添加或删除的对象。如果单个对象的属性被修改，它不会通知。

第一次初始化

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

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

从可观察数组中读取

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

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

ObservableArray 函数

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

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

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

先生。	方法与说明
1	推（'值'）在数组末尾插入一个新项目。
2	流行音乐（）从数组中删除最后一项并将其返回。
3	取消移位（'值'）在数组的开头插入一个新值。
4	转移（）从数组中删除第一项并返回它。
5	撤销（）反转数组的顺序。
6	种类（）按升序对数组项进行排序。
7	拼接（起始索引，结束索引）接受 2 个参数 - start-index 和 end-index - 删除从开始索引到结束索引的项目并将它们作为数组返回。
8	索引（'值'）此函数返回所提供参数第一次出现的索引。
9	切片（起始索引，结束索引）此方法切出数组的一部分。返回从起始索引到结束索引的项目。
10	移除所有（）删除所有项目并将它们作为数组返回。
11	删除（'值'）删除与参数匹配的项目并作为数组返回。
12	删除（函数（项目）{条件}）删除满足条件的项目并将它们作为数组返回。
13	删除（[值集]）删除与给定值集匹配的项目。
14	全部销毁() 将数组中的所有项目标记为属性 _destroy 且值为 true。
15	销毁（'值'）搜索等于参数的项目，并使用值为 true 的特殊属性 _destroy 对其进行标记。
16	销毁（函数（项目）{条件}）查找所有满足条件的项目，用属性 _destroy 标记它们为真值。
17 号	destroy([值集]) 查找与给定值集匹配的项目，将它们标记为具有真实值的 _destroy。

注意- ObservableArrays 中的 Destroy 和 DestroyAll 函数主要仅适用于“Ruby on Rails”开发人员。

当您使用 destroy 方法时，相应的项目此时并没有真正从数组中删除，而是通过用true值的属性_destroy标记它们来隐藏它们，以便 UI 无法读取它们。标记为_destroy等于true 的项目稍后在处理 JSON 对象图时被删除。