It seems that there may be some confusion in our conversation through the comments regarding what you are attempting to achieve that cannot be accomplished using dynamic-loading modules. With dynamic-loading modules, you have the ability to load your module structure dynamically and populate its elements dynamically as well.
If you prefer to handle everything manually, it is possible to do so. Simply pass your viewmodel to the fetching function. The fetching function can then return a promise, which should be resolved once the data has been fetched and placed into the viewmodel. Additionally, your template can reference other templates dynamically, allowing for a seamless transition between loading and displaying content.
function getDummyViewModelAsync(populateMe) {
return new Promise(
function(resolve, reject) {
setTimeout(function() {
populateMe.cb = ko.observable('A value');
resolve('whatever');
}, 500);
}
);
}
ko.components.register('my-component', {
viewModel: {
createViewModel: function(params, componentInfo) {
var vm = {
template: ko.observable('loading'),
ready: ready
},
ready = getDummyViewModelAsync(vm);
ready.then(function() {
vm.template('ready');
});
return vm;
}
},
template: document.getElementById('selector').innerHTML
});
console.clear();
ko.applyBindings();
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<template id='loading'>
Loading...
</template>
<template id='ready'>
Ta da!
<div data-bind="text: cb"></div>
</template>
<template id='selector'>
<!-- ko template: template -->
<!-- /ko -->
</template>
<my-component></my-component>