KO binding issue

Latest copy of: -jQuery templates -KnockoutJS -KO Mapping plugin

HTML

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"></script>
<script src="https://cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/responsive/1.0.6/css/dataTables.responsive.css">
<script src="https://cdn.datatables.net/responsive/1.0.6/js/dataTables.responsive.js"></script>
<table id="myTable" class="display responsive" width="100%">
     <thead>
            <tr>
                <th>Name</th>
                <th>Color</th>
            </tr>
        </thead>
<tbody data-bind="foreach: fruits">
    <tr>
        <td data-bind="text:$data.name"> </td> 
        <td data-bind="text:$data.color,click:$parent.displayInfo,style:{'background-color':$data.color}" class="color"> </td>   
    </tr>
    
</tbody>
</table>

CSS

td.color{
  cursor:pointer; 
}

JavaScript

var ViewModel = function() {
    var self = this;
    this.fruits = [
        { name: "Apple", color: 'Red' },
        { name: "Banana", color: 'Yellow' },
        { name: "Orange", color: 'Orange'}
    ];
    this.displayInfo = function(data){
        alert("You clicked : "+data.name);
    }

};

ko.applyBindings(new ViewModel());