JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/3.0.0/knockout-min.js"></script>
<table style="width: 100%" border="1">
<thead>
<tr>
<td>
<p><b>Classes</b>
</p>
</td>http://jsfiddle.net/yBat5/#fork
<td>
<p><b>Childs</b>
</p>
</td>
</tr>
</thead>
<tbody data-bind="foreach: Classes">
<tr>
<td>
<p data-bind=" text: Class"></p>
</td>
<td>
<p data-bind=" text: Child"></p>
</td>
</tr>
</tbody>
</table>
JavaScript
$(function () {
// define a ViewModel for your data
function ViewModel() {
this.Classes = ko.observableArray([{
"Class": "test",
"Child": "Max"
}, {
"Class": "test2",
"Child": "Walter"
}]);
}
var vm = new ViewModel(),
dummyData = [];
// create a lot of dummy data sets
for (var i = 0; i < 1000; i++) {
dummyData.push({
"Class": "test " + i,
"Child": "Child" + i
})
}
// constantly poll for new data
// JS fiddle implements a simple echo service, which we can use
// to simulate data changes we change a rendon number
function poll() {
$.ajax({
"url": "\/echo\/json\/",
"type": "POST",
"data": {
"json": JSON.stringify(dummyData),
"deley": 3
},
"success": function (data) {
vm.Classes(data);
// poll again (3 seconds so we see how fast the update is)
setTimeout(poll, 300);
// change a random entry to see that data changes
var randomnumber=Math.floor(Math.random()*1000);
dummyData[randomnumber].Child = "Child" +randomnumber +" changed"
}
});
}
poll();
// apply it to the page, knocout now does the binding for you
ko.applyBindings(vm);
});