1

100 個以上のアイテムのリストを含むテーブルがあり、各アイテムには 100 個以上のアイテムのリストを含む 3 つのドロップダウンがあります。

以下のメソッドを使用して、ユーザーが MVC アプリから json データを取得する検索ボタンをクリックしたときにその場でバインディングをアクティブにしています。

問題は、IE8 が Chrome レンダリングの 20 倍の時間を要することです。

私は自分のコードで以下のkoのヒントに従いました:

  • 基になる配列で valueHasMutated を使用して、観測可能なヒットを減らしました
  • 表示する必要のある単一のアイテムをドロップダウンにロードし、ユーザーがマウスをドロップダウンに合わせたときにのみ、必要なすべてのアイテムをロードします select
  • jqueryonイベントを適切に破棄

IE8 はイントラネット アプリであるため、IE8 をターゲットにする必要があり、IE8 と KO のパフォーマンスが原因でアプリが問題になっているため、引き続き KO を使用します。

cshtmlコード：

... htmlテーブル内に、ドロップダウンを表示するための以下のtdがあります。

           <td>
                <span data-bind="attr: { id: 'type-ddpl-holder-' + RowUniqueNo() }">
                <select data-ddpl-loaded="false" class="type-ddpl">                    
                    <option data-bind="html: TypeName() ? TypeName() : '--Please select--''" selected></option>
                </select>                    
                </span>                                        
            </td>

... が必要です select を一意の要素 IDを持つバインディングにRowUniqueNo()置き換えます。ko templatedom

その意図は、ko オプション バインディングを使用せずに、ドロップダウンに json からのアイテムをロードすることです。つまり、1 つのアイテムのみをドロップダウンします。

以下の ko コードは、上記のテンプレートをレンダリングする ajax 成功ハンドラーにあります。

     ko.applyBindingsToNode(document.getElementById('place-holder'),
                 { template: { name: 'def-edit-tmpl', data: vm} });
                    onDdpl();
                    var element = document.getElementById('place-holder');
                    ko.utils.domNodeDisposal.addDisposeCallback(element, function () {                       
                        offDdpl();
                    });
  • onDdpl 関数はon、「ホバー」イベントの jquery イベントにフックします。これにより、最初にバインドされselectたコントロールが、バインディングを使用して ko テンプレート バインディングに置き換えられますoptions。
  • offDdpl 関数は、onイベントを破棄するために使用されます。

以下はonイベントで使用されたテンプレートです

<script type="text/html" id="type-ddpl-tmpl">
    <select class="fl tb120w" data-ddpl-loaded="true" data-bind="options: $parent.typeList, optionsText: 'Value', optionsValue:'Key', value:$data.TypeId">                
    </select>

このアプローチで 100 個のアイテムをレンダリングする場合、IE8 は 10 秒以上かかり、Chrome は 1 秒未満かかります。10 秒以上の間、IE8 は応答しません。パフォーマンスを改善するためのヘルプ/ヒントは本当に感謝しています。

4

0 に答える 0