Observables（Observables）

优质

小牛编辑

125浏览

2023-12-01

KnockoutJS基于以下3个重要概念。

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

我们将在本章中研究Observables。

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

使用Observable，可以非常轻松地使UI和ViewModel动态通信。

语法 (Syntax)

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

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

例子 (Example)

让我们看一下下面的例子，它演示了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("");

输出 (Output)

让我们执行以下步骤来查看上述代码的工作原理 -

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

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

阅读和写作可观察者

下表列出了可在Observable上执行的读写操作。

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

Sr.No.

读/写操作和语法

Read

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

Write

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

Write multiple

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

可观察数组

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

语法 (Syntax)

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

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

首次初始化

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

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

从Observable Array读取

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

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

可观测的数组函数 (Observable Array Functions)

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 - 从开始到结束索引中删除项目并将它们作为数组返回。
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() 使用值为true的属性_destroy标记数组中的所有项。
15	destroy('value') 搜索等于参数的项目，并使用值为true的特殊属性_destroy标记它。
16	destroy(function(item) { condition}) 查找满足条件的所有项目，使用具有true值的属性_destroy标记它们。
17	destroy([set of values]) 查找与给定值集匹配的项，将它们标记为具有true值的_destroy。

Note - ObservableArrays中的Destroy和DestroyAll函数主要用于'Ruby on Rails'开发人员。

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