0

ノックアウトと foreach バインディングを介して html テーブルをレンダリングしています。基礎となる観測可能な配列をソートするとき、大量のデータがあると再描画に数秒かかることがあるため、再描画が完了するまでグリッド上にブロック/スピナーを表示したいと考えています。これが私のコードの単純化されたフィドルです：

http://jsfiddle.net/cmontgomery/bkcsR/

afterMoveforeach全体ではなく、行ごとに起動するため、使用できません。本当に近いノックアウトのフォークを見つけました: https://github.com/SteveSanderson/knockout/pull/690。ただし、再描画中にページがロックされ、すべての再描画が完了するまでスピナーが上がらないため、まだうまく機能していないようです。

PS> これにはユーザー エクスペリエンスの問題があるかもしれませんが、冗談です ;)

4

3 に答える 3

1

配列に並べ替えを適用すると、配列内のどの項目が最後の項目であるかを知ることができます。次に、「afterMove」イベント ハンドラーで、アイテムの要素が新しい位置に移動し、進行状況マークが非表示になる瞬間を待ちます。ここにフィドルがあります：

http://jsfiddle.net/rustam/jdavU/8/

observableArray の「change」イベントと「foreach」バインディングの「afterMove」イベントの両方を利用できます。

var lastMovedData = null;

Grid.prototype.onChange = function(value){
    lastMovedData = value && value.length ? value[value.length - 1] : null;
    console.log('show Progress image');
};

Grid.prototype.onAfterMove = function(value, index, data){

    //console.log('after move');

    if(lastMovedData && data.key == lastMovedData.key){
        console.log('hide Progress image. Last item\'s key: ' + data.key);
    }

};
于 2012-12-31T19:58:41.710 に答える
0

setTimeout私はこのコミットを使用してこれを達成することができました：「 foreach/template bindings のコールバックの前後にグローバルを追加します」。フィドルでノックアウトのこのカスタム ビルドに簡単にリンクできなかったので、Rustamのコードを使用してブロックを解除しました (ただし、実際のコードでは、seanami のafterイベントがクリーンであることが気に入っていforeach/templateます)。これが実際の例です：

http://jsfiddle.net/cmontgomery/MvBBC/

setTimeout は、並べ替えを続行する前に、ブロック コードがグリッドをカバーするのに十分な時間を与えます。

Grid.prototype.sort = function (column) {
    $("#mygrid").block({ message: '<div />', overlayCSS: { opacity: 0.1, borderRadius: '4px' }, css: { border: 'none', background: 'transparent'} });
    setTimeout(this.doSort.bind(this, column), 100);
};
于 2013-01-02T16:09:17.040 に答える
0

ちょっと興味がありますが、ページネーションについて調べましたか?

また、コンテナのバインディングを避けて直接trに適用することで、より良いパフォーマンスが得られると思います。また、スパンのテンプレートを避けて、代わりにテキスト バインディングを使用できますか? データをより多態的にするか、列のプロパティ名が日付のプロパティ名と一致するようにする必要がある場合があります。そのような

text: $parent[$data.propName]

マスクに関しては、不透明度が絶対にグリッド上に配置された div を使用し、bool フラグで切り替えることができます。カスタムバインディングを使用して、複雑なシナリオでこれを行いました。ここでの問題の 1 つは、グリッドが最初にいっぱいになるにつれて、グリッドのサイズが大きくなることです。また、静的データのようにも見えます。ソート状態のために Dom ノードを保存する巧妙なバインディングを思いつくことができるかもしれません。

于 2012-12-29T01:52:34.817 に答える