Knockout.js - Was genau passiert mit dem Beobachtbaren in diesem Beispiel?

Question

Ich versuche gerade, Knockout.js zu lernen - ich bin auch relativ neu für JavaScript selbst.

Auf der Website gibt es ein Beispiel - http://knockoutjs.com/examples/clickcounter.html - Dass ich gerade versuche, meinen Kopf herumzuwickeln.

Ich habe einige Kommentare in den folgenden Code mit dem eingelegt, was meiner Meinung nach vorgeht. Und es gibt eine Frage, wie die Funktion funktioniert.

Es wäre großartig, wenn jemand, der in Knockout mehr erfahren hat, genau erklären könnte, was dort vor sich geht. Vielen Dank.

 (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

Ich nehme an, Ihre Verwirrung ist mit dieser Zeile:

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

numberOfClicks ist eine beobachtbare, nicht eine Zahl, also + ist dafür nicht definiert.

Beim Anruf numberOfClicks() Das "packt" das Beobachtbare in den zugrunde liegenden Wert (die Zahl). Ich glaube, dass das Aufrufen eines beobachtbaren als eine Funktion mit einem einzigen Argument den Wert so aktualisiert this.numberOfClicks(1+1) würde den Wert von festlegen numberOfClicks zu 2.

Answer 2

this.numberOfClicks; ist ein beobachtbares. Dies ist ein spezieller Typ mit Knockoutjs, mit dem Sie zwei-Wege an DOM-Elemente binden können. Wenn diese Eigenschaft geändert wird, aktualisieren alle DOM -Elemente, die daran gebunden sind, ihren Wert automatisch.

Sie zugreifen und setzen Observable, als wären sie Funktionen, da sie tatsächlich Funktionen unter den Cover sind.

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

this.hasClickedTooManyTimes ist ein dependentObservable, was ähnlich wie ein beobachtbares ist, außer dass es eine Funktion ist. Wie bei normalen Observablen können diese auch an DOM -Elemente gebunden sein. Wann hasClickedTooManyTimes wird ausgeführt, Knockout wird den Überblick über die Abdeckungen behalten, auf welche Observable es stützt und wann immer einer von Sie Veränderung wird das Bindungssystem wissen, um alles zu aktualisieren, was gebunden ist hasClickedTooManyTimes

Für dieses spezielle Beispiel:

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

Wann immer numberOfClicks wird aktualisiert, alles, was gebunden ist hasClickedTooManyTimes Wille automatisch Aktualisieren Sie sich selbst.

Und das this Parameter, den Sie an die abhängige Funktion übergeben, ist nur ein kleiner syntaktischer Zucker, um zu bekommen this sich richtig verhalten.

Hier ist die Fantastisches Video Das hat mich zum ersten Mal mit Knockoutjs vorgestellt