Question

我正在阅读现有代码。最初，代码初始化属性'Data'：

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>

初始化为可观察对象的字段是否可以成为knockout.js中的数组？

1 个答案: