JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.js"></script>
<ul data-bind="foreach: RandomItems">
<li data-bind="text: $data"></li>
</ul>
JavaScript
var asyncObservable = function(dependencies, loader, context) {
var args;
var result = ko.observable();
ko.dependentObservable(function() {
args = ko.toJS(dependencies);
setTimeout(function() {
result(loader.apply(context, args));
}, 0);
});
return result;
};
var viewModel = new function() {
var self = this;
var dummyItems = [];
for (var i = 0; i < 10000; i++) {
dummyItems.push(ko.observable(Math.random() * 1000));
}
self.Items = ko.observableArray(dummyItems);
self.RandomItems =asyncObservable([self.Items], function(items) {
return ko.utils.arrayFilter(items, function(item) {
return item < 10;
});
});
}();
ko.applyBindings(viewModel);