KnockoutJS无法在HTML中打印json数组

时间:2016-05-19 08:45:53

标签: arrays json knockout.js

我有这个代码用于我的viewmodel奇怪为什么它不用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吗?

1 个答案:

答案 0 :(得分:1)

您的HTML无效:您遗漏了table

周围的tbody元素

在这种情况下,浏览器(至少是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