knockout.js-この例では、観察可能なもので正確に何が起こっているのですか？

Question

私は現在、knockout.jsを学ぼうとしています - 私はJavaScript自体にも比較的新しいです。

ウェブサイトに例があります - http://knockoutjs.com/examples/clickcounter.html - 現在、頭を包み込もうとしていること。

私は以下のコードにいくつかのコメントを入れました。そして、機能がどのように機能しているかについて質問があります。

ノックアウトの経験豊富な誰かが、そこで何が起こっているのかを正確に説明できれば、それは素晴らしいことです。ありがとう。

 (function() {  

    var clickCounterViewModel = function () {

    // Here it looks like numberOfClicks is assigned the value 0 and wrapped in a ko.observable method 
    // that allows any changes of it to ripple throughout the application.
    this.numberOfClicks = ko.observable(0);  

    //  A function is created called registerClick and assigned to the ViewModel.
    //  The value of numberOfClicks is currently 0.  
    this.registerClick = function () {

        //  numberOfClicks is being used here as a method, but it was created as a property.
        //  It almost looks like I could write:  this.numberOfClicks = this.numberOfClicks() + 1,
        //  however, that doesn't work.  this.numberOfClicks is being passed into itself as an argument.
        //  Is this some sort of recursion?  Can someone familiar with Knockout please explain how this is working?
        this.numberOfClicks(this.numberOfClicks() + 1);  
    }

    this.hasClickedTooManyTimes = ko.dependentObservable(function () {
        return this.numberOfClicks() >= 3;
    }, this);
};

ko.applyBindings(new clickCounterViewModel());      


});

Answer 1

私はあなたの混乱をこの線と一緒にします：

this.numberOfClicks(this.numberOfClicks() + 1);  

numberOfClicks 数ではなく、観察可能です + それのために定義されていません。

電話するとき numberOfClicks() それは、観察可能な値（数）に「包装」します。私は、単一の引数を持つ関数として観察可能なものを呼ぶことが値を更新すると信じているので、 this.numberOfClicks(1+1) の値を設定します numberOfClicks 2に。

Answer 2

this.numberOfClicks; 観察可能です。これは、DOM要素への双方向のバインドにできる特別なタイプのknockoutjsです。このプロパティが変更されるたびに、バインドされているDOM要素は自動的に値を更新します。

それらは実際にカバーの下の関数であるため、それらが関数であるかのように観測可能性にアクセスして設定します。

clickCounterViewModel.numberOfClicks(99);
var numClicksInViewModel = clickCounterViewModel.numberOfClicks(99);
//numClicksInViewModel == 99

this.hasClickedTooManyTimes aです dependentObservable, 、これは、機能であることを除いて、観察可能なものに似ています。通常のオブザーバブルと同様に、これらはDOM要素にもバインドできます。いつ hasClickedTooManyTimes 実行されていると、ノックアウトは、カバーの下で、それが依存している観測可能性を追跡します。 彼ら 変更、バインディングシステムは、に拘束されているものを更新することを知っています hasClickedTooManyTimes

したがって、この特定の例については：

this.hasClickedTooManyTimes = ko.dependentObservable(function () {
    return this.numberOfClicks() >= 3;
}, this);

いつでも numberOfClicks 更新され、何にでも縛られます hasClickedTooManyTimes 意思 自動的 自体を更新します。

そしてそれ this 依存装置に渡すパラメーターは、取得するためのほんの少し構文砂糖です this 適切に動作する。

これが次のとおりです 素晴らしいビデオ それが最初に私にknockoutjsを紹介しました