📌  相关文章
📜  KnockoutJS-观察值

📅  最后修改于: 2020-10-23 07:34:20             🧑  作者: Mango

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

  • 它们之间的可观察对象和相关性跟踪-DOM元素通过“数据绑定”连接到ViewModel。他们通过Observables交换信息。这将自动处理依赖项跟踪。

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

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

我们将在本章中研究Observable。

顾名思义，当您将ViewModel数据/属性声明为Observable时，每次使用该数据的所有位置都会自动反映任何数据修改。这还包括刷新相关的依存关系。 KO会处理这些事情，因此无需编写额外的代码即可实现。

使用Observable，使UI和ViewModel动态通信变得非常容易。

句法

您只需要使用函数ko.observable（）声明ViewModel属性即可使其成为可观察的。

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

例

让我们看下面的示例，该示例演示Observable的用法。

现场演示
KnockoutJS Observable Example
      
   
   
   
      

      
Enter your name: 

      
Hi  Good Morning!!!

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

Enter your name:

以下行仅显示yourName的值。注意，这里的数据绑定类型是文本，因为我们只是在读取值。

Hi  Good Morning!!!

在下面的代码行中，ko.observable密切关注yourName变量以进行数据修改。进行修改后，相应的位置也将使用修改后的值进行更新。当您运行以下代码时，将出现一个输入框。当您更新该输入框时，无论使用什么地方，新值都会得到反映或刷新。

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

输出

让我们执行以下步骤，看看上面的代码如何工作-

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

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

  • 输入名称“ Scott”，观察名称反映在输出中。

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

读写可观察物

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

Sr.No. Read/Write Operation & Syntax
1

Read

To read value just call Observable property without parameters like: AppViewModel.yourName();
2

Write

To write/update value in Observable property, just pass the desired value in parameter like: AppViewModel.yourName(‘Bob’);
3

Write multiple

Multiple ViewModel properties can be updated in a single row with the help of chaining-syntax like: AppViewModel.yourName(‘Bob’).yourAge(45);

可观察阵列

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

句法

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

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

首次初始化

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

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

从可观察数组读取

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

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

ObservableArray函数

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

  • 这些功能适用于所有浏览器。

  • 这些功能将自动处理依赖项跟踪。

  • 语法易于使用。例如，要将元素插入数组，只需使用arrayName.push（’value’）而不是arrayName（）。push（’value’）。

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

Sr.No. Methods & Description
1 push(‘value’)

Inserts a new item at the end of array.
2 pop()

Removes the last item from the array and returns it.
3 unshift(‘value’)

Inserts a new value at the beginning of the array.
4 shift()

Removes the first item from the array and returns it.
5 reverse()

Reverses the order of the array.
6 sort()

Sorts array items in an ascending order.
7 splice(start-index,end-index)

Accepts 2 parameters – start-index and end-index – removes items starting from start to end index and returns them as an array.
8 indexOf(‘value’)

This function returns the index of the first occurrence of parameter provided.
9 slice(start-index,end-index)

This method slices out a piece of an array. Returns the items from start-index up to end-index.
10 removeAll()

Removes all items and returns them as an array.
11 remove(‘value’)

Removes items that match the parameter and returns as an array.
12 remove(function(item) { condition })

Removes items which are satisfying the condition and returns them as an array.
13 remove([set of values])

Removes items that match with a given set of values.
14

destroyAll()

Marks all items in an array with property _destroy with value true.
15

destroy(‘value’)

Searches for an item equal to the parameter and mark it with a special property _destroy with value true.
16

destroy(function(item) { condition})

Finds all items which are satisfying the condition, marks them with property _destroy with true value.
17

destroy([set of values])

Finds the items that match with a given set of values, marks them as _destroy with true value.

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

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