JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<table>
        <thead>
            <tr>
                <th>Value</th>
            </tr>
        </thead>
        <tbody data-bind="foreach: items">
            <tr>
                <td>
                    <input type="text" data-bind="value: itemValue, event: { change: $parent.itemChanged }" />
                </td>
            </tr>
        </tbody>
    </table>

JavaScript

function viewModel() {
    var self = this;
    self.items = ko.observableArray();
    
    self.itemChanged = function(item) {
        //item from args
        alert(item.itemValue());
        
        //Item in observable array
        for (var i = 0 ; i < self.items().length; i ++){
            if (self.items()[i].id() == item.id()){
                 alert(self.items()[i].itemValue());       
            }
        }
    };
    
    self.addItem = function(item) {
        self.items.push(item);
    };
    
    /*self.output = function()
    {
      alert(self.items()[0].itemValue());
    };*/
}

function item(id, itemValue) {
    this.id = ko.observable(id);
    this.itemValue = ko.observable(itemValue);
}

var vm = new viewModel();
ko.applyBindings(vm);

vm.addItem(new item(1, "one"));
vm.addItem(new item(2, "two"));
vm.addItem(new item(3, "three"));