AMD test

by whelkaholism

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.2/moment.min.js"></script>
<script src="//cdn.cfront-cloud.co.uk/scripts/dev/jquery.cf.depends.js"></script>
<div data-bind="component: 'Test/TestComponent'"></div>

JavaScript

var dependsComponentLoader = {
    loadTemplate: 
    	function(name, templateConfig, callback) 
    	{
            console.log('loadTemplate', name, templateConfig);
            
        	if (templateConfig.depends)
            {
                var options = typeof(templateConfig.depends) == 'string' ? templateConfig.depends : 'immediate';
                var registration = options == 'immediate' ? { module: templateConfig.depends[0] } : null;
                    
            	$.depends(options, registration).then(
					function(content)
                    {
		                ko.components.defaultLoader.loadTemplate(name, content, callback);
                    }
                );
            }
        	else 
            	callback(null);
        }
};
 
// Register it
ko.components.loaders.unshift(dependsComponentLoader);

function Model(data, mapping)
{
    var _this = this;
    var _mapping = $.extend({}, {}, mapping);
    
    if(data)
        ko.mapping.fromJS(data, _mapping, _this);
}

ko.components.register('Test/TestComponent', { 
    template: { depends: ['//cdn.cfront-cloud.co.uk/scripts/dev/hello.html'] } 
});

var model = new Model();
ko.applyBindings(model);