如何将数据放入嵌套数组并将其绑定到 HTML Knockout.js

Question

我已初始化对象数组并将另一个空数组放入其中，我希望在从 API 获取数据后立即更新此嵌套数组。我正在控制台中获取数据，但 HTML 端没有任何反应。我认为这是因为当我推送空数组时 HTML 被初始化为空，并且当数据更新时它没有绑定来自嵌套数组的数据。

我试过这样的：

var dummy_data = { 
nested_array: ko.observableArray()
};
function IndexViewModel()
{
 var self = this;
 self.main_array = ko.observableArray([]);
};
// I want to push at start, because there are so many API calls and I don't 
// want user to wait until all data is loaded.
globalpointer.main_array.push(dummy_data);
fetch("/SomeRoute").then(x => {
        x.json().then(b => {
      dummy_data.nested_array = b;
   });
});
var globalpointer = new IndexViewModel()
ko.applyBindings(globalpointer);

HTML 是：

 <!-- ko foreach:main_array() -->
   <!-- ko foreach:nested_array() -->
  <div data-bind='text:name'>

  </div>
   <!-- /ko -->
 <!-- /ko -->

我希望在 HTML 中获得 name，但我一无所获！虽然我写的时候可以在控制台看到它：

globalpointer.main_array()[0].nested_array

显示nested_array中的所有信息。

Answer 1

这将nested_array中的可观察数组替换为json()的解析结果，这不是可观察数组：

 x.json().then(b => {
    dummy_data.nested_array = b;
 })

假设您的 fetch 结果解析为一个数组，那么您会想要这样做：

 x.json().then(b => {
    dummy_data.nested_array(b);
 })

如何将数据放入嵌套数组并将其绑定到 HTML Knockout.js

How to put data into nested array and bind it to HTML Knockout.js

javascript

knockout.js