ko components + RequireJs = light version

by Ilia Tretiakov

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.17/require.js"></script>
<equipment></equipment>

JavaScript

// source: http://jsfiddle.net/rniemeyer/tgm8wn7n/

requirejs.onError = function(err){
    debugger;
    
    throw err;
}
requirejs.config({
    paths: {
        knockout: 'https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-debug',
        'knockout.validation': 'https://cdnjs.cloudflare.com/ajax/libs/knockout-validation/2.0.2/knockout.validation',
        'knockout.mapping': 'https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping',
        text: 'https://cdnjs.cloudflare.com/ajax/libs/require-text/2.0.12/text',
        domReady: 'https://cdnjs.cloudflare.com/ajax/libs/require-domReady/2.0.1/domReady'
    },
    shim: {
        //jquery: { exports: jQuery },
        //knockout: { exports: 'ko' }
    }
});

define('text!/templates/knockout.js.template/equipment.html', [], function () {
    return "<h2 data-bind='text: title'></h2>";
});

define('equipment', ['knockout', 'text!/templates/knockout.js.template/equipment.html', 'knockout.validation', 'domReady'], function(ko, templateHtml, validation){
    debugger;
    
    function MyComponentViewModel(params) {
        var self = this;
        
        self.title = ko.observable('ups');
    }

    return { viewModel: MyComponentViewModel, template: templateHtml };
});

require(['knockout'/*, 'text'*/], function(ko){
    debugger;
    
    ko.components.register('equipment', { require: 'equipment' });
    
    ko.applyBindings({});
});