Iterácia v JSON pomocou knockout.js - json, knockout.js

Na realizáciu svojej webovej aplikácie používam Knockout.js. Získavam údaje z databázy a pomocou Jsona odovzdávam údaje na html stránku, ktorá je vykreslená pomocou dátovej väzby.

Chcel by som nastaviť dynamickejšiu možnú aplikáciu, takže by som chcel iterovať pomocou json kľúčov bez „tvrdého kódovania“ názvu poľa

Mám nasledujúce json: {"id_user": "63", "email": "mail@email.it", "flag": "1"} a iterovať pomocou:

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

ale chcel by som sa vyhnúť e-mailovej schránke a .flag a použitiu [0] alebo [1] na opätovné použitie tejto štruktúry pre všetky modely. Ako to môžem urobiť?

odpovede:

Dalo by sa to urobiť pomocou vlastné viazanie:

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

Potom vytvorte tieto metódy:

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

Vytvoril som jsFiddle demonštrovať to tiež.

Tu je niekoľko aktualizovaných html, aby ste dostali hlavičku a riadky s tŕňom a 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>