向Knockout javascript添加加载图标 [英] Adding a loading icon to Knockout javascript
问题描述
我使用Knockout创建了一个非常简单的数据加载示例。我想要做的是添加一个加载图标,以便在加载数据时显示。任何人都能告诉我下面的例子使用的正确语法吗?
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>
推荐答案
虽然这不是你的具体例子,但这是您可以用来显示任何类型的加载指示器的技术:
While this isn't your example specifically, this is a technique you could use to display a loading indicator of any sort:
http://jsfiddle.net/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!
})
.complete(function () {
// always remove the loading, regardless of load/failure
self.isLoading(false);
});
}
};
ko.applyBindings(vm);
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>
这篇关于向Knockout javascript添加加载图标的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!