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

1 个答案: