Knockout Passport Form

by Rupesh Kokal

HTML

<script src="https://github.com/downloads/SteveSanderson/knockout/knockout-2.1.0.js"></script>
    <div style="width: 99%; height: 100%;" data-bind="foreach: Main.Items">
    <div class="formVisibility" style="width: 100%; height: 100%;" data-bind="visible: !PopupForm.Visible()">
        <div style="width: 100%;">
            <span class="sf-paneltitle" data-bind="text:P1.TagName"></span>
        </div>
        <div style="width: 100%; border: 1; border-style: solid; border-width: 1px; border-color: Black;
            display: inline-block">
            <div style="width: 100%;">
                <div style="width: 40%; float: left">
                    <span class="sf-formfirstlabelinset" data-bind="text:D1.TagName"></span>
                </div>
                <div class="sf-formfirstbody" style="width: 59%; display: inline-table">
                    <select data-bind="options: D1.Options, optionsText: 'optiontext', value: D1.SelectedValue">
                    </select>
                </div>
            </div>
            <div style="width: 100%;" data-bind="visible: C1.Visible">
                <div style="width: 40%; float: left; display: inline;">
                    <span class="sf-formfirstlabelinset" style="display: inline;" data-bind="text:C1.TagName">
                    </span><span style="display: inline; position: relative;" data-bind="SpanClass: C1.SpanClass">
                    </span>
                </div>
                <div class="sf-formfirstbody" style="width: 59%; display: inline-table" data-bind="foreach:C1.options">
                    <div style="width: 100%;">
                        <input type="checkbox" data-bind="value: $data.optionvalue, checked: $parent.C1.selectedOptions, event: { change: $parent.C1.ondatachange}" />
                        <label data-bind="text: $data.optiontext">
                        </label>
                    </div>
                </div>
            </div>
            <div style="width: 100%;"...

CSS

body {
 border-right: 0px; 
 border-top: 0px; 
 border-bottom: 0px; 
 border-left: 0px; 
 margin: 0px; 
 cursor: default; 
 background-color: #ffffff;
 border:1px solid white;
}
.sf-formbackground
{
    background: url(../images/popup-bgnew.jpg);
    /*background-color:#FFFFFF;*/
    
     /* Mozilla overlay */
}
.sf-headerbar
{
    background-color:#F1F1F1;
}
.sf-gridrowappended
{
    background-color:#BCD2EE;
    border-bottom-style:none;
    border-left-style:none;
    border-right-style:none;
    border-top-style:none;    
}
.sf-formlabel{
font-family: "Segoe UI" , "Verdana";
color:#0c2c3f;
font-size: 11px;
padding-bottom: 0px;
text-decoration: none;
vertical-align:middle;
font-weight:bold;
width: 40%;
border-bottom:1px solid #F5F5F5;
border-right:1px solid #F5F5F5;

}
.sf-formlabeldescription{
font-family: "Segoe UI" , "Verdana";
color:#1f1f1f;
font-size: 11px;
font-weight:normal;
padding-bottom: 8px;
text-decoration: none;

}
.sf-formbody{
font-family:Verdana;
font-size:.7em;
vertical-align:top;
padding:3px 6px 4px 6px;
background-color:#FAFAFA;
border-bottom:1px solid #F5F5F5;
}
.sf-formfirstlabel{
font-family: "Segoe UI" , "Verdana";
color:#0c2c3f;
vertical-align:middle;
border-right:1px solid #F5F5F5;
font-size: 11px;
padding-bottom: 0px;
font-weight:bold;
text-decoration: none;
width: 40%;
border-bottom:1px solid #F5F5F5;
border-top:1px solid #F5F5F5;
}
.sf-formfirstlabeldescription{
font-family: "Segoe UI" , "Verdana";
color:#1f1f1f;
font-size: 11px;
padding-bottom: 8px;
font-weight:normal;
text-decoration: none;
}

.sf-formEcslabel{
font-family: "Segoe UI" , "Verdana";
color:#0c2c3f;
vertical-align:middle;
border-right:1px solid #F5F5F5;
font-size: 11px;
padding-bottom: 0px;
font-weight:bold;
text-decoration: none;
width: 40%;
border-bottom:1px solid #F5F5F5;
border-top:1px solid #F5F5F5;

overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.sf-formEcslabeldescription{
font-family: "Segoe UI" , "Verdana";
color:#1f1f1f;
font-size:...

JavaScript

//
        // IE browsers do not support indexOf method for an Array. Hence 
        // we add it below after performing the check on the existence of
        // the same.
        //
        if (!Array.prototype.indexOf)
        {
            Array.prototype.indexOf = function (obj, start)
            {
                for (var i = (start || 0), j = this.length; i < j; i++)
                {
                    if (this[i] === obj)
                    {
                        return i;
                    }
                }
                return -1;
            };
        }

function X2JS() {
    var VERSION = "1.0.6"

    var DOMNodeTypes = {
        ELEMENT_NODE        : 1,
        TEXT_NODE           : 3,
        CDATA_SECTION_NODE : 4,
        DOCUMENT_NODE        : 9
    }
    
    function getNodeLocalName( node ) {
        var nodeLocalName = node.localName;            
        if(nodeLocalName == null) // Yeah, this is IE!! 
            nodeLocalName = node.baseName;
        if(nodeLocalName == null || nodeLocalName=="") // =="" is IE too
            nodeLocalName = node.nodeName;
        return nodeLocalName;
    }
    
    function getNodePrefix(node) {
        return node.prefix;
    }

    function parseDOMChildren( node ) {
        if(node.nodeType == DOMNodeTypes.DOCUMENT_NODE) {
            var result = new Object;
            var child = node.firstChild; 
            var childName = getNodeLocalName(child);
            result[childName] = parseDOMChildren(child);
            return result;
        }
        else
        if(node.nodeType == DOMNodeTypes.ELEMENT_NODE) {
            var result = new Object;
            result.__cnt=0;
            
            var nodeChildren = node.childNodes;
            
            // Children nodes
            for(var cidx=0; cidx <nodeChildren.length; cidx++) {
                var child = nodeChildren.item(cidx); // nodeChildren[cidx];
                var childName = getNodeLocalName(child);
               ...