JSFiddle - React, Tailwind, and code Playground

by thinkloop

HTML

<table>
<tr data-bind="foreach: products"><td data-bind="attr: { id: $index }, text: prod, event: { mouseover: $root.handleMouseOver }"></td></tr>
<tr data-bind="foreach: products"><td data-bind="text: amount"></td></tr>
</table>

<!--
I was thinking about key handling specifically, but yes.  Playing around some more, I see I can map the id from the foreach to an observable and fetch the domId, from which I can use jquery to actually see where it is on the page and whether or not I need to scroll it onto the page.  I haven't fully implemented it, but the code below seems to give me that access.  My biggest question being new to knockout is if this is the "right" way to do it.  

      		<div class="page" data-bind="foreach: rows">
		        <div class="row" data-bind="foreach: columns, hasFocus: isSelected, attr: { id: domId }">

in page model's key  handler (assuming I have the row model).  

rowElem = $('#' + rowModel.domId());
-->

JavaScript

// Josh Stratton
var vm = function () {
    var self = this;
    
    self.products = ko.observableArray([
        { prod: "product1", amount: "5" },
        { prod: "product2", amount: "2" },
        { prod: "product3", amount: "23" },
    ]);
        
    self.handleMouseOver = function(item, e) {
        console.log(item, e);
    }
}
ko.applyBindings(new vm());