knockout.js Work with Model

HTML

<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-2.2.0.js"></script>
<b>Choose File name to load properties:</b> 
<select data-bind="options: customExportFileArray, optionsText: function(item) { 
return item.FileName }, value: selectedTemplate">
</select>
<input type="button" Value="Get Current File Object" data-bind="click: GrabData" />
<br/><br/>

<div>
    <label><b>File Name</b></label>
    <input type="text" data-bind="value: selectedTemplate().FileName"/>
</div>
<br/>
<div>
    <label><b>Choose File Format</b></label><br/>
    <!-- FileFormat is a string property, so I need to check like this: FileFormat == 'Excel'  -->
    <label><input type="radio" name="FileFormat" value="Excel" data-bind="checked: selectedTemplate().FileFormat" />Excel</label>
    <br/>
    <label><input type="radio" name="FileFormat" value="CSV" data-bind="checked: selectedTemplate().FileFormat" />CSV</label>
</div>
<br/>
<div>
    <label><b>Filter Settings</b></label>
    <br/>
    <label><input type="radio" name="FilterSettings" value="true" data-bind="checked: selectedTemplate().FilterSettings"/> Keep</label>
    <br/>
    <label><input type="radio" name="FilterSettings" value="false" data-bind="checked: selectedTemplate().FilterSettings" /> Do not keep</label>
</div>
<br/>
<div>
    <label><b>Comparison Metrics</b></label><br/>
    <label><input type="radio" name="ComparisonMetrics" value="true" data-bind="checked: selectedTemplate().ComparisonMetrics" />Do not include</label>
    <br/>
    <label><input type="radio" name="ComparisonMetrics" value="false" data-bind="checked: selectedTemplate().ComparisonMetrics" />Include</label>
</div>
<br/>
<div>
  <div class="PopupSupportText"> Choose the specific Conversion Types you would like to include in your export file by moving it from the left column to the right column.</div>
    <div class="PopupColumn1">
      <div class="PopupColumnHeaders"><b>Conversion Types to Choose From</b></div>
        <div...

CSS

#wizard_tabs {
    position: absolute; margin-top: 0px; width: 766px; height: 552px; z-index: auto; /*border: 1px solid green;*/ /*margin-bottom: -10px;*/}

 div.panes .panesTab {
     height: 423px; width: 724px; border: 1px solid #dadada; border-top: none;}

    .panes .panesTab {
        background-color: #FFFFFF; display: none; font-size: 14px; padding: 0 20px; overflow: hidden;}


    ul.tabs {
        border-bottom: 1px solid #CCC; background-color: #EEEEEE; height: 44px; list-style: none outside none; padding-left: 10px;}

        ul.tabs li {
            float: left; list-style-image: none !important; margin: 0 !important; padding: 0; text-indent: 0; border-left: 1px solid #CCC;}

        ul.tabs a {
            color: #333333; display: block; font-size: 11px; padding: 15px 18px 15px 18px; position: relative; text-align: center; text-decoration: none; /*width: 134px;*/ text-shadow: 2px 2px #FFF;}

            ul.tabs a:active {outline: medium none;}

            ul.tabs a:hover {/*background-position: -420px -31px; color: #333; font-weight: bold; font-size: 11px;*/}

            ul.tabs a.current, ul.tabs a.current:hover, ul.tabs li.current a {
                background-position: -420px -62px; color: #333 !important; cursor: default !important; 
                font-weight: bold; font-size: 11px; padding-bottom: 16px; background-color: white;}

            ul.tabs a.s {background-position: -553px 0; width: 81px;}

                ul.tabs a.s:hover {background-position: -553px -31px;}

                ul.tabs a.s.current {background-position: -553px -62px;}

            ul.tabs a.l {background-position: -248px 0; /*width: 157px;*/}

                ul.tabs a.l:hover {background-position: -248px -31px;}

                ul.tabs a.l.current {background-position: -248px -62px;}

            ul.tabs a.xl {background-position: 0 0; width: 248px;}

                ul.tabs a.xl:hover {background-position: 0 -31px;}

                ul.tabs a.xl.current...

JavaScript

var AttributionCustomExport = {
    CustomExportModel: function(){
        var self = this;
        self.GrabData = function(){
            return alert(ko.toJSON(self.selectedTemplate));
        };
        self.selectedTemplate = ko.observable();
        self.customExportFileArray = ko.observableArray([
          {
            "IncludeInExportConversionTypesSelectList" :
              [
                {
                  "ConversionGroupID" : 1,
                  "Title" : "Quote Start - Auto"
                },
                {
                  "ConversionGroupID" : 2,
                  "Title" : "Quote Finish - Auto"
                },
                {
                  "ConversionGroupID" : 5,
                  "Title" : "Sales Data"
                }
              ],
            "ChooseFromConversionTypesSelectList" : [],
            "FileName" : "Template1",
            "FileFormat" : "Excel",
            "FilterSettings" : "true",
            "ComparisonMetrics" : "false"
          },
          {
            "IncludeInExportConversionTypesSelectList":
              [
                {
                  "ConversionGroupID" : 1,
                  "Title" : "Quote Start - Auto"
                },
                {
                  "ConversionGroupID" : 5,
                  "Title" : "Sales Data"
                }
              ],
            "ChooseFromConversionTypesSelectList":
              [
                {
                  "ConversionGroupID" : 2,
                  "Title" : "Quote Finish - Auto"
                }
              ],
            "FileName" : "Template2",
            "FileFormat" : "CSV",
            "FilterSettings" : "false",
            "ComparisonMetrics" : "true"
          }
        ]);
    },
    OnDocumentReady: function(){
        ko.applyBindings(new AttributionCustomExport.CustomExportModel());    
    }
}
   
AttributionCustomExport.OnDocumentReady();