使用knockout.js在JSON中迭代

我正在使用Knockout.js实现我的web应用程序。 我从数据库获取数据，并使用Json将数据传递到通过数据绑定呈现的html页面

我想在我的应用程序中设置更具动态性的选项，以便在不“硬编码”字段名的情况下迭代json键

我有以下json:{“id_user”：“63”，“email”：mail@email.it“，”标志“：“1”} 并使用以下命令进行迭代：

        <table data-bind="foreach:page().users">
            <tr>
                <td data-bind="text:$data.email"></td>
                <td data-bind="text:$data.flag"></td>
            </tr>
        </table>

但我希望避免使用.email和.flag，并使用[0]或[1]对所有模型重用此结构。我该怎么做呢？

您可以通过以下方式完成：

然后创建以下方法：

  ko.bindingHandlers.createHeaderRow = {
      init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
          for (var property in valueAccessor()) {
              $(element).append('<td>' + property + '</td>');
          }
      }
  };
  ko.bindingHandlers.createTableRow = {
      init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
          for (var property in valueAccessor()) {
              $(element).append('<td data-bind="text: ' + property + '"></td>');
          }
      }
  };

ko.bindingHandlers.createHeaderRow={
init:function（元素、valueAccessor、allBindingsAccessor、viewModel、bindingContext）{
for（valueAccessor（）中的var属性）{
$（元素）。追加（“”+属性+“”）；
}
}
};
ko.bindingHandlers.createTableRow={
init:function（元素、valueAccessor、allBindingsAccessor、viewModel、bindingContext）{
for（valueAccessor（）中的var属性）{
$（元素）。追加（“”）；
}
}
};

---

我也创建了一个来演示它。

这里是一些更新的html，用于获取标题以及带有ad和tbody的行

 <table class="table" >
     <thead  data-bind="with: page().users()[0]">
         <tr data-bind="createHeaderRow: $data">
        </tr>
     </thead>
     <tbody data-bind="foreach: page().users()">
         <tr data-bind="createTableRow: $data">
         </tr>
     </tbody>
 </table>

我非常喜欢这个解决方案，但它是否可以进一步扩展，以根据属性名称为您提供一个标题行？哦，如果您想正确执行，可以将这两个html行放在AD和tbody中。

 <table class="table" >
     <thead  data-bind="with: page().users()[0]">
         <tr data-bind="createHeaderRow: $data">
        </tr>
     </thead>
     <tbody data-bind="foreach: page().users()">
         <tr data-bind="createTableRow: $data">
         </tr>
     </tbody>
 </table>