https://stackoverflow.com/questions/44336919/strange-ui-behavior-after-double-click

by jlspake

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.1/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table>
    <thead>
        <tr>
            <th class="col_name">Name</th>
            <th class="col_dob">DOB</th>
            <th class="col_address">Address</th>
        </tr>
    </thead>
    <tbody data-bind="foreach: rows">
        <tr data-bind="attr: { id: resource.id}, 
                css: {'isSelected':$root.selRow() == $data}, 
                event : { dblclick: $parent.selectRow.bind($parent) }" >
            <td class="col_name" data-bind="text: resource.name"></td>
            <td class="col_dob" data-bind="text: resource.birthDate"></td>
            <td class="col_address" data-bind="text: resource.address"></td>
        </tr>
    </tbody>
</table>

CSS

.isSelected {
  background-color:lightblue;
}
table {
  border-collapse: collapse;
  user-select: none;
}
td {
  padding: 2px 8px;
}

JavaScript

function viewModel (){
  this.selRow = ko.observable(null);
  this.rows = ko.observableArray([
  {resource: new resource()}, {resource: new resource()}, {resource: new resource()}]);

  this.processRow = function(item)
  {
    var self = this;
    self.selRow(item);

    console.log("Selected data to process: " + JSON.stringify(self.selRow())); 
  }
  
  this.selectRow = function(item, event){
    this.selRow(item);  
    //and other stuff?
  }
  
  this.highlightRow = function(item){
  	this.selRow(item);
  }
  
}

function resource(){
  this.name = 'resource name';
  this.birthDate = '1/1/1900';
  this.address = '123 address ln.'
}

ko.applyBindings(new viewModel());