Knockout.js/computed関数

提供: MonoBook
ナビゲーションに移動 検索に移動

knockout.jscomputed関数(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」や「クロージャー」、「高階関数」など項目を参照。JavaScriptPythonに精通している人には説明不要だろうが、C#Javaしか知らない人は「this」の扱いに特に注意する必要がある。


関連項目[編集 | ソースを編集]

参考文献[編集 | ソースを編集]

外部リンク[編集 | ソースを編集]