4

我想知道有没有办法减少对 Knockoutjs 的 Dom 操作 - 我有一个大的可观察数组，我看到在 foreach 中它需要分配时间。

在研究了代码并对其进行了调试后，我发现淘汰赛将每个元素都放入了 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 回答
1

绑定在foreach渲染大型数组时效率不高。它旨在有效地处理动态数组（可以小幅修改）。

有一些解决方案可能对您有所帮助：

  1. 使用基于字符串的模板。使用 Underscore的示例在 Knockout 文档中。

  2. 使用生成特定 HTML 内容并将其添加到 DOM 的自定义绑定。这种技术的一个例子是我的table绑定。

  3. 使用foreach我的 binding 之类的更快样式的repeat绑定。

于 2013-04-17T00:41:08.100 回答