JSFiddle - React, Tailwind, and code Playground

by Kiran Parab

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<ul id="runners" data-bind="template: {name:'runner-template', foreach:employees}"></ul>
<script type="text/html" id="runner-template">
   <li class="runner" data-bind="click: $parent.runnerSelected"> 
      <span data-bind='text: Name'></span>
   </li>
</script>

JavaScript

ko.cleanNode(document.getElementById('runners'));
var ViewModel = function(){
    var self = this;
    self.employees = ko.observable([
        {Id:1,Name:'abc'},
        {Id:2,Name:'pqr'}
    ]);
}
var result = new ViewModel();
ko.applyBindings(result, document.getElementById('runners'));

result.runnerSelected = function(data,event) {
    alert("id = "+data.Id+"\nName="+data.Name)
   //$("#runners").hide(); 
   //sponsoredRunner.id = data.Id;
   //sponsoredRunner.name = data.Name;
   //$("#sponsoredRunner").html(sponsoredRunner.name);   
}