计算的可观测量（Computed Observables）

优质

小牛编辑

137浏览

2023-12-01

Computed Observable是一个依赖于一个或多个Observable的函数，只要其基础Observable（依赖项）发生变化，它就会自动更新。

计算的Observable可以链接。

语法 (Syntax)

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

例子 (Example)

让我们看一下下面的例子，它演示了Computed Observables的用法。

<!DOCTYPE html>
   <head >
      <title>KnockoutJS Computed Observables</title>
      <script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js"></script>
   </head>
   <body>
      <p>Enter first number: <input data-bind = "value: a" /></p>
      <p>Enter second number: <input data-bind = "value: b"/></p>
      <p>Average := <span data-bind="text: totalAvg"></span></p>
      <script>
         function MyViewModel() {
            this.a = ko.observable(10);
            this.b = ko.observable(40);
            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);
         }
         ko.applyBindings(new MyViewModel());
      </script>
   </body>
</html>

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

<p>Enter first number: <input data-bind = "value: a" /></p>
<p>Enter second number: <input data-bind = "value: b"/></p>
<p>Average := <span data-bind = "text: totalAvg"></span></p>

在以下行中，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的数据绑定类型只是文本。

<p>Average := <span data-bind = "text: totalAvg"></span></p>

输出 (Output)

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

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

管理'这个'

请注意，在上面的示例中，第二个参数作为Computed函数提供。如果不提供this参考，则无法引用Observables a()和b() 。

为了克服这个问题，使用self变量来保持其参考。这样做，无需在整个代码中跟踪this 。相反，可以使用self 。

使用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;
   });
}

纯计算可观测量

如果Observable只是计算并返回值而不是直接修改其他对象或状态，则应将Computed Observable声明为Pure Computed Observable。 Pure Computed Observables帮助Knockout有效地管理重新评估和内存使用。

明确通知订阅者

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

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

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 });

如果某个属性是可计算的，则可以找到

在某些情况下，可能需要查明属性是否为Computed Observable。以下函数可用于标识Observable的类型。

Sr.No.	功能
1	ko.isComputed 如果属性为Computed Observable，则返回true 。
2	ko.isObservable 如果属性是Observable，Observable array或Computed Observable，则返回true 。
3	ko.isWritableObservable 如果是Observable，Observable数组或Writable Computed Observable，则返回true 。（这也称为ko.isWriteableObservable）

Sr.No.

功能

ko.isComputed

如果属性为Computed Observable，则返回true 。

ko.isObservable

如果属性是Observable，Observable array或Computed Observable，则返回true 。

ko.isWritableObservable

如果是Observable，Observable数组或Writable Computed Observable，则返回true 。（这也称为ko.isWriteableObservable）

可写的计算可观测量

Computed Observable派生自一个或多个其他Observable，因此它是只读的。但是，有可能使Computed Observable可写。为此，您需要提供适用于写入值的回调函数。

这些可写的Computed Observable就像常规的Observable一样工作。此外，它们还需要构建自定义逻辑来干扰读写操作。

可以使用链接语法为多个Observables或Computed Observable属性赋值，如下所示。

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

例子 (Example)

下面的示例演示了Writable Computable Observable的使用。

<!DOCTYPE html>
   <head >
      <title>KnockoutJS Writable Computed Observable</title>
      <script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js"></script>
   </head>
   <body>
      <p>Enter your birth Date: <input type = "date" data-bind = "value: rawDate" ></p>
      <p><span data-bind = "text: yourAge"></span></p>
      <script>
         function MyViewModel() {
            this.yourAge = ko.observable();
            today = new Date();
            rawDate = ko.observable();
            this.rawDate = ko.pureComputed ({
               read: function() {
                  return this.yourAge;
               },
               write: function(value) {
                  var b = Date.parse(value);    // convert birth date into milliseconds
                  var t = Date.parse(today);    // convert todays date into milliseconds
                  diff = t - b;                 // take difference
                  var y = Math.floor(diff/31449600000);     // difference is converted
                                                            // into years. 31449600000
                                                            //milliseconds form a year.
                  var m = Math.floor((diff % 31449600000)/604800000/4.3);  // calculating
                                                                           // months.
                                                                           // 604800000
                                                                           // milliseconds
                                                                           // form a week.
                  this.yourAge("You are " + y + " year(s) " + m +" months old.");
               },
               owner: this
            });
         }
         ko.applyBindings(new MyViewModel());
      </script>
   </body>
</html>

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

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

输出 (Output)

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

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