Question

我目前正在尝试学习Knockout.JS - 我对JavaScript本身也相对较新。

网站上有一个例子 - http://knockoutjs.com/examples/clickCounter.html - 我目前正试图解决这个问题。

我已经根据我的想法对下面的代码进行了一些评论。那里有一个关于函数如何工作的问题。

如果在Knockout更有经验的人能够准确地解释那里发生了什么，那将是很棒的。感谢。

 (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;是一个可观察的。这是一个特殊类型的KnockoutJs，允许您双向绑定到dom元素。每当更改此属性时，绑定到它的任何dom元素将自动更新其值。

您可以访问和设置observable，就像它们是函数一样，因为它们实际上是函数。

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

this.hasClickedTooManyTimes是一个dependentObservable，类似于一个可观察的，除了它是一个函数。像常规的可观察者一样，这些也可以与dom元素绑定。当执行hasClickedTooManyTimes时，Knockout将跟踪它所依赖的可观察对象的覆盖范围，并且当它们中的任何一个发生更改时，绑定系统将知道更新任何绑定的内容到hasClickedTooManyTimes

所以对于这个特例：

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

每当numberOfClicks更新时，绑定到hasClickedTooManyTimes的任何内容都会自动自行更新。

您传递给dependentObservable函数的this参数只是让this行为正常的一点点语法糖。

这是首次向我介绍KnockoutJS的fantastic video

Answer 2

我认为你的困惑在于这一行：

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

numberOfClicks是一个可观察的，而不是一个数字，因此+没有为它定义。

调用numberOfClicks()时，将observable“展开”为基础值（数字）。我相信使用单个参数调用observable作为函数会更新值，因此this.numberOfClicks(1+1)会将numberOfClicks的值设置为2。

Knockout.JS - 这个例子中的observable到底发生了什么？

2 个答案: