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

【问题标题】：Nested foreach loops binding issue in Knockout.jsKnockout.js 中的嵌套 foreach 循环绑定问题
【发布时间】：2016-04-27 17:25:11
【问题描述】：

我从服务器获取了一个双嵌套数组，但在使用敲除显示结果时遇到了问题。

这是我从服务器得到的结果。

数组的级别是，

- 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>

这给了我这个错误：

Uncaught ReferenceError: Unable to process binding "foreach: function (){return reporttypes }" 消息：reporttypes 未定义

【问题讨论】：

你的数据是这样的吗？ jsfiddle.net/9aLvd3uw/10
@Matt.k 是的，这是正确的，但我的数据只是返回一个数组数组。这些集合没有具体的名称。
你能像我一样硬编码你在 JSffidle 中得到的确切数据吗？
我更新了 jsfiddle。
更新后请提供新的jsfiddle的链接

标签： javascript knockout.js data-binding

【解决方案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>

【讨论】：