我已经开始从他们的教程网站学习 knockoutjs,特别是可观察数组上的位。我正在练习一些例子。
我想要求一个非常简单的澄清,关于这个代码:
var myObservableArray = ko.observableArray();
// Initially an empty array
myObservableArray.push('Some value');
alert('The length of the array is ' + myObservableArray().length);
在上面的例子中,为什么使用 myObservableArray().length
而不是 myObservableArray.length
,因为它们都给出相同的输出?
在任何传统语言中,如果我想引用一个对象,我会使用myObservableArray.length
,那么这背后有什么技术原因吗?
你假设myObservableArray.length
和myObservableArray().length
给出相同的输出是错误的:
ko.applyBindings({ myObservableArray: ko.observableArray(["A", "B", "C", "D"]) });
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<p>myObservableArray.length = <span data-bind="text: myObservableArray.length"></span></p>
<p>myObservableArray().length = <span data-bind="text: myObservableArray().length"></span></p>
这是因为myObservableArray
将包含调用函数ko.observableArray
的返回值,该函数不是数组,而是可观察量。
可观察量是具有各种属性的函数,请注意:
- 如果调用
.length
,则调用所有函数都具有的length
属性; - 如果将可观察量作为函数调用,则会获得基础值,在本例中为数组。如果对结果调用
.length
,则调用数组具有的length
属性。
底线:这两个length
属性是非常不同的东西。你几乎总是会对底层数组的长度感兴趣,这就是为什么你应该首先调用你的可观察量作为函数来"获取"值。
这是查看此问题的另一种方法,特别是在视图模型的上下文中。假设此视图模型:
var MainViewModel = function() {
var self = this;
self.myObservableArray = ko.observableArray(["A", "B", "C"]);
}
在你的视图模型中,你可以将"myObservableArray
"视为一个属性,以三种不同的方式使用:
- 使用"
self.myObservableArray
"作为对属性本身的指针/引用; - 使用 "
self.myObservableArray()
" 作为属性的 "getter" ("获取" 值:数组); - 使用"
self.myObservableArray(["new item"])
"作为属性的"setter"(为属性"设置"一个全新的值 - new array)。