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 cor

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:

    
always showing
    
Loading...


    Simulate Load