Menu
I would like my browser to be accessible immediately without having to wait for a template being loaded. Currently this is not the case when I'm providing a large array (in this case 1000 elements). I've tried using an External Template Engine, but this just results in the templates displaying "Loading ...", and the browser is not responding until they have finished loading.
To illustrate, a short example:
JS:
function User(firstname, lastname) {
this.firstname = ko.observable(firstname);
this.lastname = ko.observable(lastname);
}
function UserViewModel() {
this.allUsers = ko.observableArray([
new User("John", "Doe"),
new User("John", "Doe"),
new User("John", "Doe"),
// 1000 elements ...
new User("John", "Doe")
]);
}
ko.applyBindings(new UserViewModel());
HTML:
<html>
<head>
...
</head>
<body>
<ul data-bind="template: { name: 'my-template', foreach: allUsers() }"></ul>
<script type="text/html" id="my-template">
<li>
<h1 data-bind="text: firstname()"></h1>
<h2 data-bind="text: lastname()"></h2>
</li>
</script>
</body>
</html>
So basically what I would like is the browser to be accessible when the templates are rendering, and as soon as they are ready they should be visualized. The External Template Engine which I mentioned earlier does not meet my needs.
891
You may want to try this approach:
Show progress bar while knockout is rendering the view
If you take a look at the linked jsFiddle (http://jsfiddle.net/rniemeyer/fdSUU/) you will see the approach being used.
You basically start off with your data in a seperate array and then load them into the array say 50 items at a time via a setTimeout call. This keeps the browser active while the data loads.
86
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
