Knockout interprets the template property as a string that represents the template to apply. To load a template from a URL, you can utilize a custom loader outlined in the knockout documentation.
If your custom loader implements loadTemplate and/or loadViewModel,
you have the flexibility to incorporate custom code into the loading process. This allows for interpretation of unique configuration formats.
For instance, you may wish to support configuration formats like these:
ko.components.register('my-component', {
template: { fromUrl: 'file.html', maxCacheAge: 1234 },
viewModel: { viaLoader: '/path/myvm.js' }
});
...and this can be achieved through custom loaders.
The provided custom loader handles the loading of templates configured with a "fromUrl" value:
var templateFromUrlLoader = {
loadTemplate: function(name, templateConfig, callback) {
if (templateConfig.fromUrl) {
var fullUrl = '/templates/' + templateConfig.fromUrl + '?cacheAge=' + templateConfig.maxCacheAge;
// Utilizes jQuery's ajax method to retrieve the markup from a file
$.get(fullUrl, function(markupString) {
ko.components.defaultLoader.loadTemplate(name, markupString, callback);
});
} else {
callback(null);
}
}
};
// Register it ko.components.loaders.unshift(templateFromUrlLoader);
Source: