BASE

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="https://cdn.cfront-cloud.co.uk/scripts/6/KOApp.js"></script>
<script src="https://cdn.cfront-cloud.co.uk/scripts/6/jquery.cf.depends.js"></script>
<!-- ko module: 'Test', clearModuleNodes: false -->
    Message: <span data-bind="text: Message"></span>
<!-- /ko -->

CSS

input {
  font-size: 24px;
  font-weight: bold;
  padding: 10px;
  width: 2em;
}

JavaScript

ko.bindingHandlers['module'] = {
    'init':
    function(element, valueAccessor, allBindings, viewModel, bindingContext) 
    {
        var didDisplayOnLastUpdate;
        var savedNodes;
				var clearoninit = ko.unwrap(allBindings.get('clearModuleNodes')) !== false;

        ko.computed(
            function() 
            {
                var modulename = ko.unwrap(valueAccessor());

                if (modulename == '/')
                    modulename = 'ko-app-page';

                var module = (ko.unwrap(KOApp.current[modulename]) || KOApp.current.Lazy()[modulename] || KOApp.current.Components()[modulename]);

                var shouldDisplay = !!module && module._IsModuleLoaded && module._IsModuleLoaded();
                var isFirstRender = !savedNodes;

                // Save a copy of the inner nodes on the initial update, but only if we have dependencies.
                if (isFirstRender && ko.computedContext.getDependenciesCount())
                    savedNodes = ko.utils.cloneNodes(ko.virtualElements.childNodes(element), true /* shouldCleanNodes */);

                if (shouldDisplay) 
                {
                    if (!isFirstRender)
                        ko.virtualElements.setDomNodeChildren(element, ko.utils.cloneNodes(savedNodes));

                    ko.applyBindingsToDescendants(bindingContext['createChildContext'](module), element);
                }
                else if(clearoninit)
                   ko.virtualElements.emptyNode(element);

                didDisplayOnLastUpdate = shouldDisplay;
            },
            null,
            { disposeWhenNodeIsRemoved: element }
        );

        return { 'controlsDescendantBindings': true };
    }
};
ko.virtualElements.allowedBindings['module'] = true;

KOApp.bind({
	name: 'Test',
  chain: [ 'https://cdn.cfront-cloud.co.uk/scripts/dev/TestController.js' ],
  fqt: 'CFTestController'
});

KOApp.load();