我使用 Knockout 创建了一个非常简单的数据加载示例。我想要做的是添加一个加载图标以在数据加载时显示。谁能告诉我下面的示例使用的正确语法?
<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>