Knockout Template Engine Helper for angular 2 html like syntax

angular2TemplateLoader.html

//add this before loading knockout

<script src="/path/to/templateEngineHelper.js"></script>
<script>
    var angular2TemplateLoader = {
        loadTemplate: function (name, templateConfig, callback) {
            var markupString = templateEngineHelper(templateConfig);
            ko.components.defaultLoader.loadTemplate(name, markupString, callback);
        }
    };

    ko.components.loaders.unshift(angular2TemplateLoader);
</script>

templateEngineHelper.js

define(["require", "exports"], function (require, exports) {
    "use strict";
    var templateEngineHelper = ((function () {
        function getDataBind(item) {
            var attributeHandlers = getAttributeBindings(item);
            var eventHandlers = getEventHandlers(item);
            if (eventHandlers.length) {
                var events = "event: { " + eventHandlers.join(',') + "}";
                attributeHandlers.push(events);
            }
            return attributeHandlers;
        }
        function getAttributeBindings(item) {
            var attributeHandlers = [];
            for (var attributeIndex = item.attributes.length; attributeIndex--;) {
                var attribute = item.attributes[attributeIndex];
                if (!(startsWith(attribute.name, '[') && endsWith(attribute.name, ']')))
                    continue;
                var name_1 = attribute.name.replace('[', '').replace(']', '');
                var value = attribute.nodeValue;
                attributeHandlers.push(name_1 + ':' + value);
                $(item).removeAttr(attribute.name);
            }
            return attributeHandlers;
        }
        function getEventHandlers(item) {
            var eventHandlers = [];
            for (var attributeIndex = item.attributes.length; attributeIndex--;) {
                var attribute = item.attributes[attributeIndex];
                if (!(startsWith(attribute.name, '(') && endsWith(attribute.name, ')')))
                    continue;
                var name_2 = attribute.name.replace('(', '').replace(')', '');
                var value = attribute.nodeValue;
                eventHandlers.push(name_2 + ':' + value);
                $(item).removeAttr(attribute.name);
            }
            return eventHandlers;
        }
        function startsWith(source, searchString) {
            return source.indexOf(searchString) !== 1;
        }
        function endsWith(source, searchString) {
            return source.indexOf(searchString) === source.length - 1;
        }
        return function (view) {
            var elem = $(view)[0];
            var items = elem.getElementsByTagName('*');
            for (var i = items.length; i--;) {
                var item = items[i];
                var dataBindings = getDataBind(item);
                if (dataBindings.length) {
                    var dataBindValue = $(item).attr('data-bind');
                    dataBindValue = dataBindValue
                        ? dataBindValue + ',' + dataBindings.join(',')
                        : dataBindings.join(',');
                    $(item).attr('data-bind', dataBindValue);
                }
            }
            return $(elem).get(0).outerHTML;
        };
    })());
    return templateEngineHelper;
});
//# sourceMappingURL=templateEngineHelper.js.map

templateEngineHelper.ts

let templateEngineHelper = ((() => {
    function getDataBind(item: Element): string[] {
        const attributeHandlers = getAttributeBindings(item);

        const eventHandlers = getEventHandlers(item);
        if (eventHandlers.length) {
            const events = `event: { ${eventHandlers.join(',')}}`;
            attributeHandlers.push(events);
        }

        return attributeHandlers;
    }

    function getAttributeBindings(item: Element) {
        const attributeHandlers = [];
        for (let attributeIndex = item.attributes.length; attributeIndex--;) {
            const attribute = item.attributes[attributeIndex];
            if (!(startsWith(attribute.name, '[') && endsWith(attribute.name, ']'))) continue;
            const name = attribute.name.replace('[', '').replace(']', '');
            const value = attribute.nodeValue;
            attributeHandlers.push(name + ':' + value);
            $(item).removeAttr(attribute.name);
        }
        return attributeHandlers;
    }

    function getEventHandlers(item: Element) {
        const eventHandlers = [];
        for (let attributeIndex = item.attributes.length; attributeIndex--;) {
            const attribute = item.attributes[attributeIndex];
            if (!(startsWith(attribute.name, '(') && endsWith(attribute.name, ')'))) continue;
            const name = attribute.name.replace('(', '').replace(')', '');
            const value = attribute.nodeValue;
            eventHandlers.push(name + ':' + value);
            $(item).removeAttr(attribute.name);
        }
        return eventHandlers;
    }

    function startsWith(source, searchString): boolean {
        return source.indexOf(searchString) !== 1;
    }

    function endsWith(source, searchString): boolean {
        return source.indexOf(searchString) === source.length - 1;
    }

    return (view: string): string => {
        const elem = $(view)[0];

        const items = elem.getElementsByTagName('*');
        for (let i = items.length; i--;) {
            const item = items[i];

            const dataBindings = getDataBind(item);

            if (dataBindings.length) {
                let dataBindValue = $(item).attr('data-bind');
                dataBindValue = dataBindValue
                    ? dataBindValue + ',' + dataBindings.join(',')
                    : dataBindings.join(',');
                $(item).attr('data-bind', dataBindValue);
            }
        }

        return $(elem).get(0).outerHTML;
    }
})());

export = templateEngineHelper;