Nockout.js - Что именно происходит с наблюдаемым в этом примере?

Question

В настоящее время я пытаюсь выучить nockout.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. Всякий раз, когда это свойство изменяется, любые элементы DOM, которые связаны с ним, автоматически обновляют свое значение.

Вы получаете доступ и устанавливаете наблюдаемые, как если бы они были функциями, поскольку они на самом деле являются функциями под обложками.

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

this.hasClickedTooManyTimes это dependentObservable, что аналогично наблюдаемому, за исключением того, что это функция. Как и обычные наблюдаемые, они также могут быть связаны с элементами DOM. Когда hasClickedTooManyTimes выполняется, нокаут будет отслеживать - при обложках - на какие наблюдаемые он полагается, и всякий раз, когда кто -то из их Изменение, система привязки будет знать, чтобы обновить все, что связано с hasClickedTooManyTimes

Итак, для этого конкретного примера:

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

Когда бы ни numberOfClicks обновляется, все, что связано hasClickedTooManyTimes будут автоматически обновление само.

И это this Параметр, который вы передаете к функции зависимости, представляют собой лишь небольшой синтаксический сахар, чтобы получить this вести себя правильно.

Вот Фантастическое видео это впервые познакомило меня с нокаутированием