1

Knockout.js を使用して Web アプリを実現しています。データベースからデータを取得し、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] を使用してすべてのモデルでこの構造を再利用したいと考えています。どうすればできますか？

4

2 に答える 2

2

カスタムバインディングでこれを行うことができます：

    <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-19T12:14:54.323 に答える
0

これは、ヘッダーと、theadとtbodyを含む行を取得するための更新されたhtmlです。

 <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-21T17:03:22.747 に答える