KnockoutJS - Computed Observables

KnockoutJS Computed Observables - 从基本到高级概念的简单和简单步骤学习KnockoutJS，其中包括概述，环境设置，应用程序，MVVM框架，Observables，计算可观察量，声明性绑定，依赖性跟踪，自动UI刷新，模板化，组件。

Computed Observable是一个依赖于一个或多个Observable的函数，只要其基础Observables(依赖项)发生变化就会自动更新.

可以链接计算的Observable.

语法

this.varName = ko.computed(function(){   ...   ... //  function code   ...},this);

示例

让我们看看以下示例，该示例演示了Computed Observables的使用.

         KnockoutJS Computed Observables                  Enter first number: 
      Enter second number: 
      Average :=

在以下几行中，前两行用于接受输入值.第三行打印这两个数字的平均值.

Enter first number:

Enter second number:

Average :=

在以下几行中，Observables a 和 b 的类型是初始化时的数字第一次在ViewModel里面.但是，在KO中，从UI接受的每个输入都默认为String格式.因此需要将它们转换为Number以便对它们执行算术运算.

this.totalAvg = ko.computed(function() {      if(typeof(this.a()) !== "number" || typeof(this.b()) !== "number") {      this.a(Number(this.a()));   //convert string to Number      this.b(Number(this.b()));   //convert string to Number   }      total = (this.a() + this.b())/2 ;   return total;},this);

在以下行中，计算的平均值显示在UI中.请注意，totalAvg的数据绑定类型只是文本.

Average :=

输出

让我们执行以下步骤，了解上述代码的工作原理和减号;

将上述代码保存在 computed-observable.htm 文件中.
在浏览器中打开此HTML文件.
在文本框中输入任意2个数字，并观察平均值是否已计算出来.

管理 'This'

注意，在上面的示例中，第二个参数以此为计算函数提供。如果不提供，则无法引用可观察对象a（）和b（）。

为了克服这一点，使用了自变量，该自变量保留了该参考。这样做无需在整个代码中进行跟踪。相反，可以使用自我。

对于上述示例，使用self重写了以下ViewModel代码。

function MyViewModel(){   self = this;   self.a = ko.observable(10);   self.b = ko.observable(40);   this.totalAvg = ko.computed(function() {            if(typeof(self.a()) !== "number" || typeof(self.b()) !== "number") {         self.a(Number(self.a()));   //convert string to Number         self.b(Number(self.b()));   //convert string to Number      }            total = (self.a() + self.b())/2 ;      return total;   });}

纯计算观测值

如果一个可计算的可观察对象只是计算和返回值，而不直接修改其他对象或状态，则应将其声明为"纯可计算的可观察对象"。 Pure Computed Observables可帮助淘汰赛有效地管理重新评估和内存使用情况。

明确通知订户

当Compute Observable返回原始数据类型值（String，Boolean，Null和Number）时，则仅当实际值发生更改时，才通知其订户。这意味着，如果Observable接收到的值与先前的值相同，则不会通知其订户。

即使新值与旧值相同，也可以使用以下通知语法，使Computed Observables始终显式通知观察者。

myViewModel.property = ko.pureComputed(function() {   return ...;    // code logic goes here}).extend({ notify: 'always' });

限制变更通知

太多昂贵的更新会导致性能问题。您可以使用rateLimit属性来限制从Observable接收的通知数量，如下所示。

// make sure there are updates no more than once per 100-millisecond periodmyViewModel.property.extend({ rateLimit: 100 });

找出属性是否可计算

在某些情况下，可能有必要找出某个属性是否为"可计算的可观察对象"。以下功能可用于识别可观察对象的类型。

Sr.No.	Function
1	ko.isComputed Returns true if the property is Computed Observable.
2	ko.isObservable Returns true if the property is Observable, Observable array, or Computed Observable.
3	ko.isWritableObservable Returns true if Observable, Observable array, or Writable Computed Observable. (This is also called as ko.isWriteableObservable)

Sr.No.

Function

ko.isComputed

Returns true if the property is Computed Observable.

ko.isObservable

Returns true if the property is Observable, Observable array, or Computed Observable.

ko.isWritableObservable

Returns true if Observable, Observable array, or Writable Computed Observable. (This is also called as ko.isWriteableObservable)

可写计算观测值

计算的可观测值是从一个或多个其他可观测值派生的，因此它是只读的。但是，有可能使Compute Observable可写。为此，您需要提供适用于书面值的回调函数。

这些可写的计算可观测值的工作方式与常规可观测值相同。另外，它们要求构建自定义逻辑以干扰读写操作。

可以使用以下链接语法将值分配给许多Observable或Compute Observable属性。

myViewModel.fullName('Tom Smith').age(45)

示例

以下示例演示了可写可计算可观察对象的用法。

         KnockoutJS Writable Computed Observable                  Enter your birth Date:

在上面的代码中，rawDate是UI接受的pureComputed属性。 yourAge Observable源自rawDate。

JavaScript中的日期以毫秒为单位进行操作。因此，两个日期（今天的日期和出生日期）都转换为毫秒，然后将它们之间的差异转换为年和月。

输出

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

将以上代码保存在writable_computed_observable.htm文件中。
在浏览器中打开此HTML文件。
输入任何出生日期，并观察年龄的计算。