json - 使用 knockout.js 在 JSON 中进行迭代

Question

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

我想为我的应用程序设置更动态的可能，所以我想遍历 json 键而不“硬编码”字段名称

我有以下 json: {"id_user":"63","email":"mail@email.it","flag":"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] 为所有模型重用此结构。我该怎么做？

Answer 1

您可以使用自定义绑定来做到这一点：

    <table data-bind="foreach:page().users">
        <tr data-bind="createHeaderRow: $data">
        </tr>  
        <tr data-bind="createTableRow: $data">
        </tr>
    </table>

然后创建这些方法：

  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>');
          }
      }
  };

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

Answer 2

这是一些更新的 html，用于获取标题以及带有 thead 和 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>