1

作成、取得、編集、削除機能を備えた非常に優れたグリッドがあります。クライアントでknockout.jsを使用し、バックエンドでWebAPIを使用しています。

これをさまざまなオブジェクトに拡張したいと思います。基本的に、私はList <T>を持っています。ここで、TはMVCビューモデルであり、ノックアウトビューとビューモデルは、Tに基づいてどのように見えるかを理解できるはずです。

ビューモデル（ビューモデル自体に基づいて編集するための特定のコントロール（日付の日付ピッカー、文字列の入力、ドロップダウンなど））をグリッド形式で表示し、一般的なCRUD関数を使用する簡単な方法を知っている人はいますか？

以下は、（特定のオブジェクトに対して）使用している既存のHTMLの例です。

<table class="table table-striped table-bordered">
    <thead>
        <tr>
        <th>Value Date</th>
        <th>Position Date</th>
        <th>Book</th>
        <th>Currency</th>
        <th>Currency Base</th>
        <th>Amount1</th>
        <th>Amount2</th>
        <th>Position Type</th>
        <th style="width: 100px; text-align:right;" />
        </tr>
    </thead>
   <tbody data-bind=" template:{name:templateToUse, foreach: pagedList }"></tbody>
</table>

テンプレートは次のようになります。

<script id="itemsTmpl" type="text/html">
<tr>
    <td data-bind="text: valueDate.formattedDate"></td>
    <td data-bind="text: positionDate.formattedDate"></td>
    <td data-bind="text: book"></td>
    <td data-bind="text: currency"></td>
    <td data-bind="text: currencyBase"></td>
    <td data-bind="text: amount1"></td>
    <td data-bind="text: amount2"></td>
    <td data-bind="text: positionType"></td>
    <td class="buttons">
        <a class="btn" data-bind="click: $root.edit" href="#" title="edit"><i class="icon-pencil"></i></a>
        <a class="btn" data-bind="click: $root.remove" href="#" title="remove"><i class="icon-trash"></i></a>
    </td>
</tr>
</script>

<script id="editTmpl" type="text/html">
<tr>
    <td><input data-bind="datepicker: valueDate.formattedDate, datepickerOptions: { dateFormat: 'yy/mm/dd' }"/></td>
    <td><input data-bind="datepicker: positionDate.formattedDate, datepickerOptions: { dateFormat: 'yy/mm/dd' }"/></td>
    <td><input data-bind="value: book"/></td>
    <td><input data-bind="value: currency"/></td>
    <td><input data-bind="value: currencyBase"/></td>
    <td><input data-bind="value: amount1"/></td>
    <td><input data-bind="value: amount2"/></td>
    <td><input data-bind="value: positionType"/></td>
    <td class="buttons">
        <a class="btn btn-success" data-bind="click: $root.save" href="#" title="save"><i class="icon-ok"></i></a>
        <a class="btn" data-bind="click: $root.cancel" href="#" title="cancel"><i class="icon-remove"></i></a>
    </td>
</tr>
</script>

ビューとビューモデルを一般的なものにし、上記のように「ハードコーディング」しないようにします。他の誰かがこのようなことをしたに違いないと私は確信しています。

4

1 に答える 1

2

1つの解決策は次のとおりです。

  1. AJAX呼び出しは、JSONビューモデルのリストを取得します
  2. リストが空の場合は何も表示しない
  3. リストにアイテムがある場合は、最初のアイテムを選択してプロパティを確認します
  4. プロパティをループして、クライアントでビューの構築を開始します
  5. 文字列をDOM要素としてメインDIVに追加します
  6. ワイヤーアップノックアウト

このアプローチには問題があります。最初のオブジェクトのプロパティがnullであるが、別のオブジェクトに存在する場合はどうなりますか？その場合、その要素を設定しません。

より良いオプションは、コンテンツネゴシエーションを使用して専用のテンプレートを取得することです。

したがって、GET / api / customersは顧客を返しますが、text / knockout-template + htmlをリクエストすると、ノックアウトテンプレートが文字列として返され、DIVに追加してノックアウトをワイヤアップします。そのため、サーバーはリフレクションを使用してテンプレートを生成したり、一部のモデルに合わせてカスタマイズしたりできます。

于 2012-10-09T11:13:42.790 に答える