0

ビューをレンダリングするためにknockout.jsを使用しています.サーバーからデータを取得し、このようにバインドしています..

var viewModel = ko.mapping.fromJS(data);
ko.applyBindings(viewModel, $("#macro-wrapper")[0]);

私の見解...私はいくつかのビットをトリミングしました...しかし、バインディングは同じです...

<div data-bind="foreach: Data">
<h3>
    <a href="#" data-bind="text: Site.Name"></a>
</h3>
<div id="">
    <div data-bind="foreach: Comments">
        <div class="">
            <div class="" data-bind="click: $root.showContent">
            <a ></a>
            </div>
            <span>
                <a data-bind="attr: { 'href': Url }, text: SomeText"></a>
            </span>
            <span class="">
                <span class="" data-bind="text: ADate"></span>
            </span>
        </div>
    </div>
</div>

データにはオブジェクトの配列が含まれており、それらのオブジェクトのそれぞれに別の配列が含まれています... レンダリングする必要がある項目は約 500 あります。

私がテストしている間、私は問題を経験していませんが、展開すると、それが遅い PC であるかどうかはわかりませんが、「このスクリプトは低速で実行されています - 停止しますか?」というメッセージが表示されます。メッセージ。「いいえ」を数回クリックすると、レンダリングされます。

ノックアウトで大きなデータセットを扱うテクニックは何ですか? 理想的には、レンダリングを非同期で実行し、ユーザーが忙しく仕事をしている間、自分のことを続けられるようにしたいと思います...

プロパティは実際に監視可能である必要はありません - これは 1 回のレンダリングです...何も変わりません。簡単にするために、マッピング API を使用しています。

更新: OK、変更を加えて、マッピング API を使用しなくなりました - ページは読み込み中ですが、まだゆっくりと... 何かアイデアはありますか? 変化する：var viewModel = data;

4

2 に答える 2

2

すべての要素に対してクリック イベントがトリガーされています。これは私に以前に起こったことです。

以前の投稿者が言ったことに関して: ページに 500 個の要素をバインドする、以前はページに 500 個以上の要素をバインドする必要がありましたが、パフォーマンス コストは最新のブラウザーではほとんど無視できます (Ie 7 では速度が低下することがあります)。 8、でも悪くない)。大きな json オブジェクトを変換するときは、マッピング プラグインを使用しないことをお勧めします。KO マッピングは、(一意性をチェックするために) 各要素を他のすべての要素と比較するため、500 個のアイテムを変換すると速度が低下する理由がわかります。

于 2012-05-12T13:12:45.367 に答える
0

1 ページに 500 個のアイテムを表示することは、UI の観点からはあまり良い考えではないと思います。おそらく、最上位のアイテムのみを表示し、「コメントを表示」リンクを設定し、ユーザーから要求された場合にのみコメントをレンダリングする必要があります。または、サブアイテムを含む最初の X 最上位アイテムのみをレンダリングし、「もっと見る」リンクを設定します。または、上記の手法を組み合わせて使用​​します。とにかく、それは私のウェブサイトで同じ問題に対処する私の計画です.

于 2012-04-24T15:42:02.353 に答える