HTML CSS JAVASCRIPT PYTHON PYTHON2 JAVA C C++ C# SQL Excel Linux AI BOOTSTRAP PHP 教程库 参考手册 技术文章 测验 练习 HOWTO FAQ
❮ 上一节 下一节 ❯

KnockoutJS - 可观察对象

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

  • 可观察对象及其之间的依赖关系跟踪 - DOM 元素通过"数据绑定"连接到 ViewModel。它们通过可观察对象交换信息。这会自动处理依赖关系跟踪。

  • UI 和 ViewModel 之间的声明式绑定 - DOM 元素通过"数据绑定"概念连接到 ViewModel。

  • 模板化以创建可重复使用的组件 - 模板化提供了一种创建复杂 Web 应用程序的强大方法。

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

顾名思义，当您将 ViewModel 数据/属性声明为可观察对象时，每次对数据的任何修改都会自动反映在使用数据的所有位置。这还包括刷新相关依赖项。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>嗨 <strong data-bind = "text: yourName"></strong> 早上好!!!</p>

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

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

输出

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

  • 将上述代码保存在 first_observable_pgm.htm 文件中。

  • 在浏览器中打开此 HTML 文件。

  • 输入名称 Scott，并观察该名称是否反映在输出中。

数据修改可以从 UI 或 ViewModel 进行。无论从何处更改数据，UI 和 ViewModel 都会保持同步。这使其成为一种双向绑定机制。在上面的例子中，当您在输入框中更改您的姓名时，ViewModel 会获得一个新值。当您从 ViewModel 内部更改 yourName 属性时，UI 会收到一个新值。

读取和写入可观察对象

下表列出了可以对可观察对象执行的读取和写入操作。

Sr.No. 读取/写入操作和语法
1

读取

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

写入

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

写入多个

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

可观察数组

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

语法

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

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

首次初始化

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

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

从 Observable 数组读取

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

alert('第二个元素是 ' + 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 - 删除从开始到结束索引的项目并将它们作为数组返回。
8 indexOf('value')

此函数返回所提供参数的第一次出现的索引。
9 slice(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。

注意 − ObservableArrays 中的 Destroy 和 DestroyAll 函数主要面向"Ruby on Rails"开发人员。

使用 destroy 方法时，相应的项目实际上并未从数组中删除，而是通过用 _destroy 属性将其标记为 true 值来隐藏，这样 UI 就无法读取它们。标记为 _destroy 等于 true 的项目稍后在处理 JSON 对象图时被删除。

❮ 上一节 下一节 ❯