knockout custom binding loading async data

HTML

<div id="container">
    
    
    <div id="foo" data-bind="foo: {}">
        <h1 data-bind="text: bar"></h1>
        
    </div>
    
    
    
</div>

JavaScript

var model = { bar : "bar" };



ko.bindingHandlers.foo = {

    init : function (element) {
        
        var myPromise = new Promise(function (resolve) { 
            
            window.setTimeout(function () {
            
                resolve({ bar : "promise bar" });    
                
            }, 10000);
                     
        });  
        
        myPromise.then(function (data) {
        
            ko.applyBindingsToDescendants(data, element);
        
        });

        return { controlsDescendantBindings: true };
    }

}

ko.applyBindings(model);