Question

I’m using Knockout.js to realize my web app.
I get data from a database and i use Json to pass data to html page that is rendered through data-bind.

I would like to set the more dynamic possible my app so i would like to iterate through json keys without “hardcoding” the field name

I have the following json: {“id_user”:”63″,”email”:”[e-mail]”,”flag”:”1″}
and iterate using:

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

but i would like to avoid the .email and .flag and using [0] or [1] to reuse this structure for all the models. How can i do it?

Answer 1

You could do this with a custom binding:

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

Then create these methods:

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

I’ve created a jsFiddle to demonstrate it too.