Simple "async" extender example

by StevenSanderson

HTML

<script src="https://github.com/downloads/SteveSanderson/knockout/knockout-1.3.0beta.js"></script>
Region: 
<select data-bind="options: allowedRegionCodes, value: chosenRegion"></select>

<ul data-bind="foreach: loadedCountries">
    <li data-bind="text: name"></li>
</ul>

JavaScript

ko.extenders.async = function(target) {
    var lastResult = ko.observable([]);
    
    function handleUpdate(deferred) {
        if (deferred) {
            deferred.done(function(data) {
                lastResult(data);
            });
        }
    }
    
    handleUpdate(target());         // Handle initial value   
    target.subscribe(handleUpdate); // Handle subsequent values
    return lastResult;
}
    
function myViewModel() {
    this.allowedRegionCodes = ["WLD", "NAC"];
    this.chosenRegion = ko.observable("WLD");
    
    this.loadedCountries = ko.dependentObservable(function() {
        
        return $.ajax("http://api.worldbank.org/country?prefix=?", {
            dataType: "jsonp",
            data: { per_page: 20, region: this.chosenRegion, format: "jsonp" },
        }).pipe(function(data) { return data[1] });
        
    }, this).extend({ async: true });
}

ko.applyBindings(new myViewModel());