4

ノックアウトjsのDom操作を減らす方法があるのだろうかと思っていました-私は大きな観測可能な配列を持っており、foreachで時間がかかることがわかります。

コードを調査して少しデバッグした後、ノックアウトがすべての要素を 1 つに配置するのではなく、すべての要素を dom に配置することがわかりました。

ノックアウトで foreach ステートメントのすべての子ノードの長い文字列を作成し、その文字列を一度 DOM に書き込む簡単な方法はありますか?

私のコード:

self.items = ko.observableArray([]);     
function generateModel(data) {
            var mapped = $.map(data, function (d) { return new item(d); });
            self.items(mapped);
        }

<!--ko foreach:{data:items}-->
some template in here
<!--/ko-->

ありがとう。

4

3 に答える 3

2

必要に応じて、ここでいくつかの良いヒントを見つけることができます: http://www.knockmeout.net/2012/04/knockoutjs-performance-gotcha.html

さらに良いことに、pauseableObservableArray (偉大な名前:) という巨大な開発者によるカスタム オブジェクトの興味深い実装をここで見つけることができます: rpniemeyer) http://jsfiddle.net/rniemeyer/fYnjG/

これに加えて、最初の簡単なアプローチとして、DOM からifバインディングを使用して要素を削除しようとしましたか?

例えば。html:

<!-- ko ifnot: isWorking -->
<div data-bind="foreach: blogs">
    <span data-bind="text: id"></span>
</div>

<!-- /ko -->

ビューモデル:

function BlogViewModel() {
    var self = this;
    self.blogs = ko.observableArray([{id:'qwe'}]);

    self.isWorking= ko.observable(false);


    self.populateBlogs = function () {
        self.isWorking(true);

        var tmp =  self.blogs();

        for (var i = 0; i < 100000; i++) {
            tmp.push({id:i});
        }


        self.blogs(tmp);
        self.isWorking(false);
    }


}

[更新]おそらく、レンダリングのタイミングをさらに改善する必要がある場合は、私が提案したフィドルで実装したものと同様のものを実装するか、すべてを「手動で」実行するカスタム バインディング ハンドラーを実装する必要があります。たとえば、次のようなものです。

html:

<div data-bind="quickForEach: blogs"></div>

ヴィーモデル:

ko.bindingHandlers.quickForEach = {

    update: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {

        var blogs = valueAccessor()();
        var innerText='';
        for (var i = 0; i < blogs.length; i++) {
            //very dirty code!In production, concatenate strings in a smarter way
            innerText += blogs[i].id;
        }
        $(element).text(innerText);
    }
};
于 2013-04-16T13:32:49.287 に答える
1

はい、スロットル エクステンダーを使用する方法があります。http://knockoutjs.com/documentation/throttle-extender.html のドキュメントを参照してください。

于 2013-04-16T10:54:40.490 に答える