Ітерації в JSON за допомогою knockout.js - json, knockout.js

Я використовую 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] для повторного використання цієї структури для всіх моделей. Як я можу це зробити?

Відповіді:

Ви можете це зробити за допомогою митне обов'язкове:

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

Я створив a jsFiddle щоб це також продемонструвати.

Ось декілька оновлених 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>