ko.observableArray() is very slow for 1000+ <div> elements

Question

Please see my jsfiddler for the example.

http://jsfiddle.net/cYYEt/

If there is another way we should be binding/creating our array/etc that would work too. I have solved this problem by either using a list or spans

Thanks!

JS

var mainViewModel = function () {
    var self = this;

    this.Items = ko.observableArray();

    this.init = function () {
        var itemsArray = [];
        for(var i = 0; i < 1300; i++){
            itemsArray.push("My value is: " + i);
        }
        self.Items(itemsArray );
    };
};

$(function () {
    myApp = new mainViewModel();
    ko.applyBindings(myApp);
    myApp.init();
});​

HTML

<!-- ko foreach: Items -->
    <div data-bind="text: $data"></div>
<!-- /ko -->​

Answer 1

You can get a decent improvement in Chrome by removing the text nodes surrounding your "template" like: http://jsfiddle.net/rniemeyer/RAfNv/.

<!-- ko foreach: Items --><div data-bind="text: $data"></div><!-- /ko -->

I think we will be looking to improve this in the core at some point. We had looked at something like this before: https://github.com/SteveSanderson/knockout/pull/709, but did not end up adding any changes at this point.