Knockout.JS - Cosa sta succedendo esattamente con l'osservabile in questo esempio?

Question

Attualmente sto cercando di imparare Knockout.JS - Sono anche relativamente nuovo a JavaScript stesso.

C'è un esempio sul sito web - http://knockoutjs.com/examples/clickCounter.html - che attualmente sto cercando di capire.

Ho inserito alcuni commenti nel codice seguente con quello che penso stia succedendo.E c'è una domanda su come funziona la funzione.

Sarebbe fantastico se qualcuno con più esperienza in Knockout potesse spiegare esattamente cosa sta succedendo lì.Grazie.

 (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

Immagino che la tua confusione sia con questa riga:

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

numberOfClicks è un osservabile, non un numero, quindi + non è definito per questo.

Quando chiami numberOfClicks() che "scarta" l'osservabile nel valore sottostante (il numero).Credo che chiamare un osservabile come funzione con un singolo argomento aggiorni il valore, quindi this.numberOfClicks(1+1) imposterebbe il valore di numberOfClicks a 2.

Answer 2

this.numberOfClicks; è un osservabile. Questo è un knockoutjs di tipo speciale inserito per permetterti di legarsi a due vie agli elementi DOM. Ogni volta che questa proprietà viene modificata, qualsiasi elemento DOM che è vincolato ad essa aggiornerà automaticamente il loro valore.

Accedi e imposti osservabili come se fossero funzioni, poiché in realtà sono funzioni sotto le copertine.

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

this.hasClickedTooManyTimes è un dependentObservable, che è simile a un osservabile, tranne che è una funzione. Come gli osservabili regolari, questi possono essere legati anche agli elementi DOM. quando hasClickedTooManyTimes viene eseguito, il knockout manterrà traccia - sotto le copertine - di su cui si basa e ogni volta che uno di uno qualsiasi di loro Modifica, il sistema di vincolo saprà di aggiornare tutto ciò a cui è legato hasClickedTooManyTimes

Quindi per questo particolare esempio:

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

Ogni volta numberOfClicks viene aggiornato, tutto ciò che è destinato a hasClickedTooManyTimes volere automaticamente Aggiornamento stesso.

E quello this Il parametro che passi alla funzione dipendente da parte è solo un po 'di zucchero sintattico per ottenere this comportarsi correttamente.

Ecco il Video fantastico che per primo mi ha fatto conoscere Knockoutjs