Knockout.js - ¿Qué está pasando exactamente con lo observable en este ejemplo?

Question

Actualmente estoy tratando de aprender Knockout.js, también soy relativamente nuevo en JavaScript.

Hay un ejemplo en el sitio web - http://knockoutjs.com/examples/clickcounter.html - Que actualmente estoy tratando de entender.

He puesto algunos comentarios en el código a continuación con lo que creo que está sucediendo. Y hay una pregunta sobre cómo funciona la función.

Sería genial si alguien con más experiencia en Knockout pudiera explicar exactamente lo que está sucediendo allí. Gracias.

 (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

Supongo que tu confusión es con esta línea:

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

numberOfClicks es un observable, no un número, por lo tanto + no está definido para ello.

Al llamar numberOfClicks() que "desenvuelve" lo observable en el valor subyacente (el número). Creo que llamar a un observable como una función con un solo argumento actualiza el valor, por lo que this.numberOfClicks(1+1) establecería el valor de numberOfClicks a 2.

Answer 2

this.numberOfClicks; es un observable. Este es un tipo de KnockoutJS de tipo especial para permitirle Bind Bind a DOM Elements. Cada vez que se cambia esta propiedad, cualquier elemento DOM que esté vinculado a ella actualizará automáticamente su valor.

Accede y establece observables como si fueran funciones, ya que en realidad son funciones bajo las portadas.

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

this.hasClickedTooManyTimes es un dependentObservable, que es similar a un observable, excepto que es una función. Al igual que los observables regulares, estos también pueden estar vinculados a los elementos DOM. Cuando hasClickedTooManyTimes se ejecuta, Knockout hará un seguimiento, bajo las portadas, de los observables en los que se basa y cada vez que alguno de a ellos Cambiar, el sistema de enlace sabrá actualizar cualquier cosa que esté destinada a hasClickedTooManyTimes

Entonces, para este ejemplo en particular:

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

Cuando sea numberOfClicks se actualiza, cualquier cosa destinada a hasClickedTooManyTimes voluntad automáticamente actualizarse a sí mismo.

Y eso this Parámetro que pasa a la función dependiente de servicio es solo un poco de azúcar sintáctico para obtener this para comportarse correctamente.

Aquí esta la Video fantástico Eso primero me presentó a Knockoutjs