Adding a loading icon to Knockout javascript

Question

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>

Answer 1

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);

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>