KnockoutJS foreach 无法在 HTML 中打印 json 数组答案

【问题标题】：KnockoutJS foreach failure to print json array in HTMLKnockoutJS foreach 无法在 HTML 中打印 json 数组
【发布时间】：2016-09-16 00:53:53
【问题描述】：

我的视图模型有这段代码，想知道为什么它没有用 HTML 打印我的数组（hoi = 被正确打印）

$(document).ready(function() {
var MasterViewModel = function (model) {
    var self = this;
    debugger;
    self.ListOfSup = ko.observableArray([{ "Id": 1, "Name": "EpicT", "Brand": "X", "OriginCountry": "SH", "Reviews": null }, { "Id": 2, "Name": "EpicT", "Brand": "X", "OriginCountry": "SH", "Reviews": null }, { "Id": 3, "Name": "SuperT", "Brand": "X", "OriginCountry": "SH", "Reviews": null }, { "Id": 4, "Name": "DBl", "Brand": "X", "OriginCountry": "SH", "Reviews": null }, { "Id": 5, "Name": "Wins", "Brand": "X", "OriginCountry": "SH", "Reviews": null }, { "Id": 6, "Name": "Oxand", "Brand": "X", "OriginCountry": "SH", "Reviews": null }, { "Id": 7, "Name": "Whey", "Brand": "GS", "OriginCountry": null, "Reviews": null }]);
    self.Hoi = ko.observable("Hello Knockout");
}

var masterModel = new MasterViewModel();
ko.applyBindings(masterModel);

})

这是 HTML 的代码：

<h2 data-bind="text: Hoi">Ko</h2>
<tbody data-bind="foreach: ListOfSup">
    <tr>
        <td data-bind="text: Name"></td>
        <td data-bind="text: Brand"></td>
    </tr>
</tbody>

把我逼疯了。我的数组还不够 Json 吗？

【问题讨论】：

标签： arrays json knockout.js

【解决方案1】：

您的 HTML 无效：您缺少 tbody 周围的 table 元素

在这种情况下，浏览器（至少 Chrome）无法解释唯一的 tbody 和只是从 DOM 中完全删除它

所以修复很简单：添加table:

<h2 data-bind="text: Hoi">Ko</h2>
<table>
  <tbody data-bind="foreach: ListOfSup">
      <tr>
          <td data-bind="text: Name"></td>
          <td data-bind="text: Brand"></td>
      </tr>
  </tbody>
</table>

演示JSFiddle.

【讨论】：

感谢您的解决方案！