RactiveJS; RequireJS; Dynamic component; Condition based code loading

foo.js

define([
    'ractive',
    'module'],

function(Ractive, module) {

    return Ractive.extend({
        template: '{{# isLoaded }}<innerComponent />{{/ isLoaded }}',
        components: {
            innerComponent: function() {
                return getInnerComponentName(this);
            }
        },

        oninit: function() {
            var self = this;
            require([getInnerComponentPath(this, module)], function(innerComponent) {
                self.set('isLoaded', true);
            });
        }
    });
});