Knockout.JS - Qu'est-ce qui se passe exactement avec l'observable dans cet exemple?

Question

Je suis actuellement essayer d'apprendre Knockout.JS -. Je suis aussi relativement nouveau JavaScript lui-même

Il y a un exemple sur le site - http://knockoutjs.com/examples/clickCounter.html -. que je suis en train d'essayer d'envelopper ma tête

J'ai mis quelques commentaires dans le code ci-dessous avec ce que je pense qui se passe. Et il y a là une question sur la façon dont la fonction fonctionne.

Ce serait génial si quelqu'un de plus expérimenté en Knockout pourrait expliquer exactement ce qui se passe là-bas. Merci.

 (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

Je suppose que votre confusion est avec cette ligne:

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

numberOfClicks est observable, pas un nombre, donc + n'est pas défini pour elle.

Lorsque vous appelez numberOfClicks() que « déballe » l'observable dans la valeur sous-jacente (le nombre). Je crois que l'appel observable en fonction d'un seul argument met à jour la valeur, donc this.numberOfClicks(1+1) fixerait la valeur de numberOfClicks à 2.

Answer 2

this.numberOfClicks; est observable. Ceci est un type spécial KnockoutJs mis pour vous permettre de les deux sens se lient à des éléments dom. Chaque fois que cette propriété est modifiée, les éléments dom qui y sont liés automatiquement mis à jour leur valeur.

Vous accédez et ensemble comme si observables ils étaient des fonctions, car ils sont en fait des fonctions sous les couvertures.

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

this.hasClickedTooManyTimes est un dependentObservable, qui est similaire à une observable, sauf que c'est une fonction. Comme régulièrement observables, ceux-ci peuvent être liés à des éléments dom aussi bien. Lorsque hasClickedTooManyTimes est exécuté, Knockout gardera piste sous les couvertures-dont OBSERVABLES elle repose sur, et chaque fois que de les changement, le système de fixation ne saura rien de mise à jour qui est lié à hasClickedTooManyTimes

Donc, pour cet exemple:

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

Chaque fois que numberOfClicks est mis à jour, quoi que ce soit lié à hasClickedTooManyTimes sera automatiquement mise à jour lui-même.

Ce paramètre this que vous passez à la fonction dependentObservable est juste un peu de sucre syntaxique pour obtenir this à se comporter correctement.

Voici le vidéo fantastique m'a présenté à KnockoutJS