3

jquery ajax呼び出しを介してデータをロードするためにWCFサービスを呼び出しています。WCF サービスは非常に高速にデータを返しますが、ノックアウトはそのデータを非常に遅くロードします。以下は、jquery ajaxを使用したwcfサービスへの私の呼び出しです

 function loadData(id) {
        var input =
            {
                Id: id
            };


        $.ajax({
            url: "../Service/Table/TableData",
            type: "PUT",
            contentType: 'application/json',
            processData: false,
            data: JSON.stringify(input),
            error: function (XMLHttpRequest, textStatus, errorThrown) {

                alert(errorThrown);
            },
            success: function (allData) {
                var mappedData= $.map(allData, function (item) {

                    return new TableData(item);
                });
                self.TableDataList(mappedData);



            }
        });

    }

以下は私の見解です

<div  style="overflow: hidden;margin-top: 30px;margin-left: 10px;float:left;" >

            <table style="width: 100%" >

                <colgroup>
                    <col   />
                    <col  />

                    <col/>
                </colgroup>

                <thead><tr>

                           <th style="padding: 0px">Id </th>
                           <th style="padding: 0px">Name</th>

                       </tr>

                </thead>

            </table>
            <div style="overflow: auto;height: 490px;">
                <table id ="Table1" class="Hover" style="width: 100%;" >
                    <colgroup>
                        <col   style="width: 20px"/>
                        <col style="width: 80px"/>

                        <col/>
                    </colgroup>
                    <tbody data-bind="foreach: TableDataList">

                        <tr>

                            <td style="padding: 0px;text-align: left" data-bind="text: Id"  ></td>
                            <td style="padding: 0px;" data-bind="text: Name "></td>

                        </tr>   


                    </tbody>
                </table>
            </div>

約 20000 レコードを読み込んでいますが、ページの読み込みに 2 分かかります。これを回避する方法は？

更新1

jquery テンプレートを使用すると問題が解決しますか、それともページングを行う必要がありますか?

更新2

これがTableDataクラスの私のコードです

 function TableData (data) {
        this.Id = ko.observable(data.Id);
        this.Name = ko.observable(data.Name);
        this.LastName = ko.observable(data.LastName );
        this.DateOfBirth = ko.observable(data.DateOfBirth );
        this.Age= ko.observable(data.Age);


    }
4

2 に答える 2

3

@nemesvとして、ページングは​​これに対する最良の解決策です。クライアント側で 20000 レコードを処理すると、コンテンツをページにレンダリングするときにパフォーマンスの点で独自のコストがかかるため、パフォーマンスが遅いノックアウト フレームワークではありません。そのため、オンデマンドの読み込み「onScreenscroll」などを使用して、ページを高速化することもできます。

于 2013-06-28T09:16:02.643 に答える
1

TableData クラスのコードを確認できますか? このクラスの各プロパティに対して多くのオブザーバブルを作成していると思います。

ビューには入力フィールドが含まれていないため、データを変更したくないと思います。

私もそう思っていました。TableData クラスは、コードを遅くするものです。TableData クラスは計算されていないため役に立ちません。また、データを変更したくないため、TableData プロパティのオブザーバブルは必要ありません。

成功関数をこれに置き換えてみてください。

success: function (allData) {
    self.TableDataList(allData);
}

フィドルを見る

于 2013-06-28T10:56:33.970 に答える