0

Knockout で使用するために、.Net オブジェクトを JavaScript オブジェクトにシリアル化しています。ノックアウト ビュー モデルの observable および observableArray プロパティをすべて指定することなく、Knockout のマッピング プラグインを使用してビュー モデルを構築しようとしています。このページは、ビュー モデルを構築し、データを読み込み、基本的なテーブルを構築します。

これはうまく機能しています。クリック イベントを列の 1 つにバインドしました。クリックすると、選択したクライアントと共にビュー モデル全体がコントローラーに送信されます。コードの結果、ProbationOfficeWideQueueItems コレクションから 1 つのレコードが削除されます。これは、ajax 呼び出しで返される値を確認することで確認できました。

私が抱えている問題は、ビュー モデルが ko.mapping.fromJS 呼び出しで更新されないように見えることです。ドキュメントと他の複数のスタック オーバーフローの投稿を確認しましたが、問題は見つかりませんでした。

HTML と Javascript の両方のページ全体を次に示します。

<div id="probationOfficeWideQueue-@ViewData("UniqueID")">
<table id="data-grid-@ViewData("UniqueID")" class="data-grid-@ViewData("UniqueID")">
    <thead>
        <tr>
            <th>Client Number</th>
            <th>Client Name</th>
            <th>Officer</th>
            <th>Check In</th>
            <th>Send To</th>
        </tr>
    </thead>
    <tbody data-bind="foreach: ProbationOfficeWideQueueItems">
        <tr>
            <td data-bind="text: ClientNumber"></td>
            <td data-bind="text: ClientName"></td>
            <td data-bind="text: Officer"></td>
            <td data-bind="click: $root.checkInClient"></td>
            <td><input data-bind="value: SendToOfficer, text: Officer" /></td>
        </tr>
    </tbody>
</table>


<script type="text/javascript">
var viewModel = @Html.Raw(New JavaScriptSerializer().Serialize(Model));

function ProbationOfficeWideQueueViewModel(data) {
    var self = this;

    ko.mapping.fromJS(data, {}, self);

    self.checkInClient = function(row) {
        openLoadScreen();
        self.SelectedClientPIN = row.ClientPIN;

        $.ajax({
            type: "POST",
            url: getRoot() + "Probation/ProbationOfficeWideQueue/CheckInClient",
            data: ko.toJSON(self),
            contentType: "application/json",
            success: function(results){
                ko.mapping.fromJS(results, self)
                closeLoadScreen();
            },
            error: function(error){
                closeLoadScreen();
            }
        });
    }
};

function EnhanceDataTable() {
    $('.data-grid-@ViewData("UniqueID")').dataTable({
        "bPaginate": false,
        "bLengthChange": false,
        "aaSorting": [[1, 'asc'], [2, 'asc']],
        "oLanguage": {
            "sSearch": "Filter: "
        },
        "fnDrawCallback": function(){
            $('table.data-grid td').bind('mouseenter', function () { $(this).parent().children().each(function(){$(this).addClass('dataTableRowHighlight');}); });
            $('table.data-grid td').bind('mouseleave', function () { $(this).parent().children().each(function(){$(this).removeClass('dataTableRowHighlight');}); });
        }
    });
};

ko.applyBindings(new ProbationOfficeWideQueueViewModel(viewModel), $("#probationOfficeWideQueue-@ViewData("UniqueID")")[0]);
EnhanceDataTable();

マッパープラグインなしでノックアウトを使用し、監視可能なプロパティと配列を定義して入力すると、テーブルの行が適切に更新されます。これが私のフォールバック計画です。どこが間違っているのか教えてください。

編集: 最初のフィードバックの後、ajax 呼び出しの成功関数の ko.mapping.fromJS(results, self) 行でセミコロンを試したことを伝えたいと思います。また、成功方法の行に次の変更を加えました。

  • self = ko.mapping.fromJS(結果);
  • self = ko.mapping.fromJS(results, {}, self);
  • ko.mapping.fromJS(結果、{}、自己);
  • ko.mapping.fromJSON(結果、{}、自己);

また、例の 1 つのようにモデル プロパティに割り当てようとしました。

  • self.Model = ko.mapping.fromJS(results, {}, self);

テーブルの DataTables.net プラグインを無効にした後、これも試しました。

4

2 に答える 2

0

ノックアウトが何かを変更しても、jQuery Datatables は自動的に魔法のように更新されません。

次の作業を行うコードを実装することになっているようです。

$('.data-grid-123').dataTable('refresh');
于 2013-07-18T19:10:16.987 に答える