I have created a very simple example of a data load using Knockout. What I want to do is to add a a loading icon to show while the data is loading. Can anybody tell me the correct syntax to use with my example below?
<script type="text/javascript" src="@Url.Content("~/Scripts/knockout-2.1.0.js")"></script>
<script type="text/javascript">
function QBRatingsViewModel() {
var self = this;
var baseUri = '@ViewBag.ApiUrl';
self.qbratings = ko.observableArray();
$.getJSON("/api/qbrating", self.qbratings);
}
$(document).ready(function () {
ko.applyBindings(new QBRatingsViewModel());
});
</script>
<div class="page" id="page-index">
<div class="page-region">
<div class="page-region-content">
<div class="grid">
<div class="row">
<div class="span4">
<h3>QB Ratings (up to week 12)</h3>
<div id="divLoading">
<table class="bordered">
<thead>
<tr style="background-color:#f1f1f1">
<td>Team</td>
<td>Comp %</td>
<td>Av Gain</td>
<td>TD %</td>
<td>Int %</td>
<td>Rating</td>
</tr>
</thead>
<tbody data-bind="foreach: qbratings">
<tr class="qbrating">
<td><span data-bind="text: $data.TeamName"></span></td>
<td><span data-bind="text: $data.Completion"></span></td>
<td><span data-bind="text: $data.Gain"></span></td>
<td><span data-bind="text: $data.Touchdown"></span></td>
<td><span data-bind="text: $data.Interception"></span></td>
<td><span data-bind="text: $data.CalculatedRating"></span></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I have created a very simple example of a data load using Knockout. What I want to do is to add a a loading icon to show while the data is loading. Can anybody tell me the correct syntax to use with my example below?
<script type="text/javascript" src="@Url.Content("~/Scripts/knockout-2.1.0.js")"></script>
<script type="text/javascript">
function QBRatingsViewModel() {
var self = this;
var baseUri = '@ViewBag.ApiUrl';
self.qbratings = ko.observableArray();
$.getJSON("/api/qbrating", self.qbratings);
}
$(document).ready(function () {
ko.applyBindings(new QBRatingsViewModel());
});
</script>
<div class="page" id="page-index">
<div class="page-region">
<div class="page-region-content">
<div class="grid">
<div class="row">
<div class="span4">
<h3>QB Ratings (up to week 12)</h3>
<div id="divLoading">
<table class="bordered">
<thead>
<tr style="background-color:#f1f1f1">
<td>Team</td>
<td>Comp %</td>
<td>Av Gain</td>
<td>TD %</td>
<td>Int %</td>
<td>Rating</td>
</tr>
</thead>
<tbody data-bind="foreach: qbratings">
<tr class="qbrating">
<td><span data-bind="text: $data.TeamName"></span></td>
<td><span data-bind="text: $data.Completion"></span></td>
<td><span data-bind="text: $data.Gain"></span></td>
<td><span data-bind="text: $data.Touchdown"></span></td>
<td><span data-bind="text: $data.Interception"></span></td>
<td><span data-bind="text: $data.CalculatedRating"></span></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
1 Answer
Reset to default 17While this isn't your example specifically, this is a technique you could use to display a loading indicator of any sort:
http://jsfiddle/wiredprairie/Uq8VJ/
The important part is to just toggle the state of an observable in your view model, which then can trigger a visibility binding to hide or show a loading indicator.
var vm = {
isLoading: ko.observable(false),
loadData: function () {
var self = this;
self.isLoading(true);
$.getJSON("/echo/json?json={}&delay=2")
.success(function () {
// success!
})
.plete(function () {
// always remove the loading, regardless of load/failure
self.isLoading(false);
});
}
};
ko.applyBindings(vm);
And the HTML:
<div id='container'>
<div>always showing</div>
<div id='loading' data-bind="visible: isLoading">Loading...</div>
</div>
<div>
<button data-bind="click: loadData">Simulate Load</div>
</div>