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

您可以使用custom binding：

执行此操作

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

使用knockout.js在JSON中迭代

2 个答案: