初始化为 observable 对象的字段能否成为 knockout.js 中的数组？

Question

我正在阅读现有代码。最初，代码初始化属性“数据”：

self.Data = ko.observable({});

但之后，在某些函数中，代码将“数据”分配给如下所示的内容。 self.Data 未设置为 observableArray，但在下面，它通过数组原样使用。在这一行之前没有其他代码触及 self.Data，所以当它到达这一行但在赋值之前，它仍然是一个 ko.observable({})。

self.Data()[0] = ko.observable("");

我在想这是在 knockout.js 中将可观察对象转换为数组的合法语法，但如果我尝试立即对其长度发出警报，如 alert(self.Data().length)，它未定义。

我的问题是这段代码实际上是做什么的？

Answer 1

它不是一个可观察的数组。它是一个对象。使用 javascipt 对象，您可以通过点表示法或索引表示法访问它的属性。 link

由于 javascript 是动态类型的，您可以向现有对象添加新属性。

下面的代码实际上只是为现有的对象实例添加了一个新的 observable 属性。

self.Data()[0] = ko.observable("");

下面是一个示例，希望能帮助您了解正在发生的事情。

var vm = function(){
  var self = this;
  self.data = ko.observable({});
  self.dataString = ko.computed(function(){return JSON.stringify(self.data(), null, 2);});

  self.propertyName = ko.observable(0);
  self.propertyValue = ko.observable('someValue');

  self.update = function(){
    //This adds a new property or updates an existing property of the object the self.data observable references.
    //The name of the property will be the value of the self.propertyName observable which will be the value typed into the first textbox in the UI.
    //The value of the property will be the value of the self.propertyValue observable which will bhe the value typed into the second textbox in the UI.
    self.data()[self.propertyName()] = self.propertyValue();
    //Need to force an update since the data observable wasn't directly modified
    self.data.valueHasMutated(); 
  };
  
  self.replace = function(){
    //Replace the existing value with a new object
    var data = {};
    data[self.propertyName()] = self.propertyValue();
    self.data(data);
  };
}

$().ready( function(){
  ko.applyBindings(new vm());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

Property Name <input data-bind="textInput:propertyName" /> <br />
Property Value <input data-bind="textInput:propertyValue" /> <br />

<button data-bind="click:update">Update</button>
<button data-bind="click:replace">Replace</button><br />
The self.data observable represented as a json string:
<pre data-bind="text:dataString"></pre>