JQuery&UI&Knockout Template

by gurkavcu

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/2.2.1/knockout-debug.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.3.2/knockout.mapping.js"></script>
    
    <!-- ko foreach: sampleData -->
       <!-- ko template: { name: template, data: $data } --><!-- /ko -->  
    <!-- /ko -->  

<script id="inputTemplate" type="text/x-jquery-tmpl">
    <div>
    My form field : <input type="text" name="MyFormField" data-bind="value:value"/>
    </div>
</script>

<script id="spanTemplate" type="text/x-jquery-tmpl">
    <div>
    My form field consultable : <span data-bind="text:value"></span>
    </div>
</script>

CSS

.form-horizontal .control-group {
      margin-bottom: 5px;
  }
  .form-horizontal .control-label {
      /*width: 50px;*/
      /*font-size: 12 px;*/
  }
  .dividerContainer {
      background-color:#fafafa;
      white-space:nowrap;
  }
  .divider {
      border: 2px coral solid;
      display:inline-table;
  }
  .optionDiv {
      width: 30px;
      display : inline;
  }
  .plus {
      width: 20px;
      height: 20px;
  }

JavaScript

var viewModel;

function ViewModel() {
    var self = this;
    self.sampleData = [{
        "template": 'spanTemplate',
        "value": "Alice"
    }, {
        "template": 'inputTemplate',
        "value": "Bob"
    }];
}

$(document).ready(function () {
    viewModel = new ViewModel();
    ko.applyBindings(viewModel);
});