Knockout.js/computed関数

knockout.jsのcomputed関数（computedオブジェクト）とは、セッターで設定された関数内で使われているobservableオブジェクトがひとつでも更新されると、自動的に計算をおこない、まるでobservableオブジェクトと同じように振る舞う監視関数（オブジェクト）である。

記述例

この例は、observableオブジェクトである firstName または lastName のどちらかが更新されると、fullNameも自動的に更新されるというものである。

var AppViewModel = function() {
    var self = this;

    self.firstName = ko.observable('mono');
    self.lastName  = ko.observable('mono');

    // firstNameまたはlastNameが更新されると自動的に
    // fullNameも更新される。
    self.fullName = ko.computed(function() {
        return self.firstName() + " " + self.lastName();
    });
};

computed関数は、ビュー（HTML）での各種バインディングでobservableオブジェクトと同じよう扱える。

私の名前は<span data-bind="text: fullName"></span>です。

なお、この例においてAppViewModelオブジェクト内でthis変数をself変数に代入している意味について謎な人は「JavaScript/this」や「クロージャー」、「高階関数」など項目を参照。JavaScriptやPythonに精通している人には説明不要だろうが、C#やJavaしか知らない人は「this」の扱いに特に注意する必要がある。

関連項目

• knockout.js
  • applyBindings関数
  • observable関数（observableオブジェクト）
  • observableArray関数（observableArrayオブジェクト）
  • computed関数
  • subscribe関数