Knockout.js Custom Tags

by jcreamer898

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<tp-autocomplete select="onSelect"></tp-autocomplete>

JavaScript

ko.tags = {
    "tp-autocomplete": {
        init: function(options) {
            console.log(options);    
        },
        template: "<input type='text' name='firstName' />"
    }
};

ko.bindingProvider.instance.preprocessNode = function(node) {
    if (node.nodeType !== 1) {
        return;
    }
    
    var name = node.tagName.toLowerCase(),
        tag;
    
    if (tag = ko.tags[name]) {
        var attributes = node.attributes,
            options = {};
        
        for (var i = 0; i < node.attributes.length; i++) {
            var attrib = node.attributes[i];
            
            if (attrib.specified) {
                options[attrib.name] = attrib.value;
            }
        }
        
        if (tag.init) {
            tag.init(options);    
        }
        
        if (tag.template) {
            $(node).replaceWith(tag.template);
        }
    }
};

ko.applyBindings({});