📌  相关文章
📜  KnockoutJS-计算的可观察物

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

计算可观察值是一项函数，它依赖于一个或多个可观察值，并在其基础可观察值（相关性）发生更改时自动更新。

可以链接计算的可观察物。

句法

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

例

让我们看下面的示例，该示例演示了计算可观测对象的用法。

现场演示
KnockoutJS Computed Observables
      
   

   
      
Enter first number: 

      
Enter second number: 

      
Average :=

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

Enter first number: 


Enter second number: 


Average :=

在以下各行中，可观察对象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 :=

输出

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

  • 将上面的代码保存在calculated-observable.htm文件中。

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

  • 在文本框中输入任意两个数字，然后观察得出平均值。

管理“这个”

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

为了克服这个问题，使用了自变量来保存this的引用。这样做，就没有必要在整个代码跟踪此。相反，可以使用自我。

对于上述示例，使用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 Compute 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 period
myViewModel.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)

可写计算观测值

计算的可观测值是从一个或多个其他可观测值派生的，因此它是只读的。但是，有可能使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文件。

  • 输入任何出生日期，并观察到年龄是正确的。