使用knockout.js迭代JSON

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

我想设置更多的动态可能我的应用程序，所以我想通过JSON键遍历没有“硬编码”字段名

我有以下的JSON：{“id_user”：“63”， “电子邮件”： “[email protected]”， “标记”： “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]为所有模型重用此结构。我该怎么做？

来源

2013-02-19 Cris

你可以用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来证明这一点。

来源

2013-02-19 12:14:54

酷！非常感谢你！ – Cris 2013-02-19 12:50:47

我非常喜欢这个解决方案，但是它可以进一步扩展为基于属性名称的标题行吗？ – Matthew 2013-02-21 15:55:17

当然可以！看到我更新的答案。 – 2013-02-21 16:33:30

下面是一些最新的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>

来源

2013-02-21 17:03:22 Matthew

使用knockout.js迭代JSON

回答

相关问题