在Knockout.js中嵌套的foreach循环绑定问题

Question

我从服务器获得了一个双嵌套数组，但是在使用knockout显示结果时遇到了麻烦。

以下是我从服务器获得的结果。

阵列的水平是，

- Columns
  - reporttypes
     - reports
       - AvailableInCognos
     - reports
        - AvailableInCognos
  - reporttypes
     - reports
       - AvailableInCognos
- Columns
   - reporttypes
- ....

这是代码js代码。

function mainViewModel() {
    self = this;

    self.reports = ko.observableArray([]);
    self.reporttypes = ko.observableArray(self.reports());
    self.columns = ko.observableArray(self.reporttypes());

    $.ajax({
        ...
        success: function (result) {
            self.columns.push(result);
        }
    });
}

return mainViewModel;

HTML：

<div data-bind="foreach: columns">
    <div class="landing-group" data-bind="foreach: reporttypes">
        <div class="standard-container" data-bind="foreach: reports">
            <h2 class="txt-upper" data-bind="text: AvailableInCognos"></h2> 
        </div>
    </div>
</div>

这给了我这个错误：

  

未捕获的ReferenceError：无法处理绑定“foreach：function   （）{return reporttypes}“消息：未定义reporttypes

Answer 1

您输入数据的屏幕截图与您提供的小提琴并不完全相关。 data应该是一个数组，然而在你的小提琴中它是一个对象。您在嵌套代码中调用数据结构Array，但它们是对象（并且应该是数组 - 根据该屏幕截图）。不确定为什么要创建3个独立的数组，你可以使用简单的代码，例如：

var data = [
  [
    [{
      AvailableInCognos: true
    }]
  ],
  [
    [{
      AvailableInCognos: false
    }]
  ]
]
console.log(data);

function vm() {
  self = this;

  self.columns = ko.observableArray([]);

  self.columns(data);
  return self;
}

ko.applyBindings(vm());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<div data-bind="foreach: columns">
  <div class="landing-group" data-bind="foreach: { data: $data, as: 'reportType' }">
    <div class="standard-container" data-bind="foreach: { data: $data, as: 'report' }">
      <h2 class="txt-upper" data-bind="text: AvailableInCognos ? 'Available' : 'Not available'"></h2>
    </div>
  </div>
</div>