Question

得到以下代码时，我感到很困惑。我正试图了解淘汰赛是如何运作的。这是完整的代码

<span data-bind="text: TimeString">Start...</span>
var vm = {
            TimeDT: ko.observable(),
            TimeString: ko.observable()
        };

        function updateValues() {
            var data = new Date();
            vm.TimeDT(data);
            vm.TimeString(data);
        }

        ko.applyBindings(vm);

        updateValues();
        setInterval(updateValues, 5000);

看看这段代码

 var vm = {
                TimeDT: ko.observable(),
                TimeString: ko.observable()
            };

我可以理解一个对象是这样声明的。 vm是这里的对象，它有两个函数叫做 TimeDT＆amp; TimeString ，但我无法理解这个

TimeDT: ko.observable(), what is the meaning of 
ko.observable() is assign to TimeDT ?

what will store in TimeDT return by  ko.observable() ?

请详细了解更多示例代码。感谢

Answer 1

ko.observable是淘汰赛跟踪变化变量的方式。如果您希望淘汰赛能够响应更改，则必须使用ko.observable。

所以，如果你这样做：

var myVM = {
    someProp = true
}

然后在代码中的其他地方执行此操作：

myVM.someProp = false;

Knockout不会看到变化。但是，如果你这样做：

var myVM = {
    someProp = ko.observable(true);
}

然后您可以稍后使用以下内容更改其值：

myVM.someProp(false);

并且Knockout会注意到更改并自动更新任何绑定的html。

注意：由于ko.obsevable是函数而不是实际属性（感谢IE不支持Javascript getter和setter），访问该值有点不同：

var whatsMyValue = myVM.someProp();

你必须实际调用该方法，它将返回它的值。当你第一次开始并最终做这样的事情时，很容易忘记：

if (myVM.someProp) {
    // this code will always be executed regardless of the actual value 
    // of someProp() because myVM.someProp is a function, 
    // which is truthy.
}

你真正需要的是

if (myVM.someProp()) {
    // now this works as expected.
}

另请注意，执行此操作时：

TimeDT: ko.observable()

TimeDT是一个没有初始值的可观察对象。但是你这样做了：

vm.TimeDT(data);

Knockout将看到更改并更新任何绑定到TimeDT。

Answer 2

直接来自docs：special JavaScript objects that can notify subscribers about changes, and can automatically detect dependencies。

该代码将TimeDT属性初始化为一个observable，它将跟踪对其值的更改并在必要时更新UI。

这个Knockout代码是如何工作的

2 个答案: