KnockoutJS - 可观察对象

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

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

我们将在本章中学习可观察对象。

顾名思义，当您将 ViewModel 数据/属性声明为可观察对象时，每次数据修改都会自动反映在使用该数据的所有位置。这也包括刷新相关的依赖项。KO 会处理这些事情，无需编写额外的代码来实现此目的。

使用可观察对象，可以非常轻松地使 UI 和 ViewModel 动态通信。

语法

您只需要使用函数ko.observable()声明 ViewModel 属性即可使其成为可观察对象。

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

示例

让我们来看下面的示例，它演示了可观察对象的使用。

实时演示

<!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 的值。请注意，此处 data-bind 类型为文本，因为我们只是读取该值。

<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 会收到一个新值。

读取和写入可观察对象

下表列出了可以在可观察对象上执行的读写操作。

序号	读/写操作及语法
1	读取要读取值，只需像这样调用可观察对象属性，无需参数：AppViewModel.yourName();
2	写入要在可观察对象属性中写入/更新值，只需像这样在参数中传递所需的值：AppViewModel.yourName('Bob');
3	写入多个可以使用链式语法在同一行更新多个 ViewModel 属性，例如：AppViewModel.yourName('Bob').yourAge(45);

序号

读/写操作及语法

读取

要读取值，只需像这样调用可观察对象属性，无需参数：AppViewModel.yourName();

写入

要在可观察对象属性中写入/更新值，只需像这样在参数中传递所需的值：AppViewModel.yourName('Bob');

写入多个

可以使用链式语法在同一行更新多个 ViewModel 属性，例如：AppViewModel.yourName('Bob').yourAge(45);

可观察数组

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

语法

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

可观察数组仅跟踪其中添加或删除了哪些对象。如果修改了单个对象的属性，它不会发出通知。

首次初始化

您可以初始化数组，并同时将其声明为可观察对象，方法是将初始值传递给构造函数，如下所示。

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

从可观察数组读取

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

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

可观察数组函数

KnockoutJS 有一套自己的可观察数组函数。它们很方便，因为：

这些函数可在所有浏览器上运行。
这些函数将自动处理依赖项跟踪。
语法易于使用。例如，要将元素插入数组，您只需使用 arrayName.push('value') 而不是 arrayName().push('value')。

以下是各种可观察数组方法的列表。

序号	方法及描述
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 到 end index 的项，并将它们作为数组返回。
8	indexOf('value') 此函数返回提供的参数的第一次出现的索引。
9	slice(start-index,end-index) 此方法切出数组的一部分。返回从 start-index 到 end-index 的项。
10	removeAll() 删除所有项并将其作为数组返回。
11	remove('value') 删除与参数匹配的项，并将其作为数组返回。
12	remove(function(item) { condition }) 删除满足条件的项，并将它们作为数组返回。
13	remove([set of values]) 删除与给定值集匹配的项。
14	destroyAll() 将数组中所有项的 _destroy 属性标记为 true。
15	destroy('value') 搜索与参数相等的项，并将其标记为 _destroy 属性，值为 true。
16	destroy(function(item) { condition}) 查找所有满足条件的项，将它们标记为 _destroy 属性，值为 true。
17	destroy([set of values]) 查找与给定值集匹配的项，将其标记为 _destroy 属性，值为 true。

注意 - 可观察数组中的 Destroy 和 DestroyAll 函数主要供“Ruby on Rails”开发人员使用。

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

打印页面