JSFiddle - React, Tailwind, and code Playground

by tonyleeper

HTML

<script src="http://code.jquery.com/jquery-2.0.0.min.js"></script>
<div data-bind="foreach: rows()">
    <div class="row">
        <span data-bind="text: $data.col1()"></span>
        <span data-bind="text: $data.col2()"></span>
        <span data-bind="text: $data.col3()"></span>
        <span data-bind="text: $data.col4()"></span>
        <span data-bind="text: $data.col5()"></span>
    </div>
</div>

CSS

.row {
    height: 25px;
    background-color: darkblue;
    color: white;
    margin: 5px;
}

JavaScript

/**
    knockout stress test
*/

var row = function () {
    this.col1 = ko.observable("col1");  
    this.col2 = ko.observable("col2"); 
    this.col3 = ko.observable("col3");  
    this.col4 = ko.observable("col4");  
    this.col5 = ko.observable("col5");  
};


var vm = {
    rows: ko.observableArray()
};
    
for (var i = 1; i < 5000; i++) {
    vm.rows.push(new row());
}
    
ko.applyBindings(vm);

setInterval(function () {
    for (var i = 0; i < vm.rows().length; i++) {
        vm.rows()[i].col1(Math.random());
        vm.rows()[i].col2(Math.random());
        vm.rows()[i].col3(Math.random());
        vm.rows()[i].col4(Math.random());
        vm.rows()[i].col5(Math.random());
    }
}, 1000);