knockoutのsubscribe

この記事は、knockout.js Advent Calendar 2015の１０日目の記事です。 先に９日目に目を通すことを推奨しています。
knockout , knockout-es5 , knockout.punches環境を想定しています。

subscribeはライトユーザは、ほとんど利用することがないかもしれません。　（解説：　公式、日本語）

subscribeを用いると、値が変化した際のイベントハンドラを設定できます。
subscribeは、observableに対して設定をしてあげる必要があるため、knockout-es5を利用している際にはひと手間かかります。
knockout-es5においてobservableを取得するには、ko.getObservable({someObject},'property-name')を行います。
これで、observableが取得できるので、このobserveableに対してsubscribe(変更通知）を設定します。

今回は、例として　ユーザ名の変更を検知してみました。これがそのサンプルです。

javascript

ko.getObservable(this,'myName').subscribe(function(myName){
    alert('名前が、'+myName+'に変わりました');
});

---

変更後の値および変更前の値を同時に取得したい場合は、

javascript

ko.subscribable.fn.subscribeChanged = function (callback) {
    var savedValue = this.peek();
    return this.subscribe(function (latestValue) {
        var oldValue = savedValue;
        savedValue = latestValue;
        callback(latestValue, oldValue);
    });
};

というものを定義してあげるといいでしょう。　(参考)

このように利用できます。

javascript

function VM(){
    this.myName= "山田";
    ko.track(this);
    ko.getObservable(this,'myName').subscribeChanged(function(myName,old){
        alert('名前が、'+old+'から、'+myName+'に変わりました');
    });
};