JSFiddle - React, Tailwind, and code Playground

by jiggle

HTML

<ul data-bind="foreach: items">
    <li><a href="#" data-bind="text: Name, event: {mouseup : $parent.selectItem}"></a></li>
</ul>

<p>Selected item: <span data-bind="text: ko.toJSON(selectedItem)"></span></p>

<button data-bind="click: select3rd">Select 3rd item</button>

JavaScript

var data = [
    { "Id" : 0, "Name" : "Item0" },
    { "Id" : 1, "Name" : "Item1" },
    { "Id" : 2, "Name" : "Item2" },
    { "Id" : 3, "Name" : "Item3" },
    { "Id" : 4, "Name" : "Item4" },
    { "Id" : 5, "Name" : "Item5" },
    { "Id" : 6, "Name" : "Item6" },
    { "Id" : 7, "Name" : "Item7" }
]

function vm(){
    var self = this;
    self.items = ko.observableArray(data);
    self.selectedItem = ko.observable();
    self.selectItem = function(item){
        self.selectedItem(item);
    }
    self.select3rd = function(){
        self.selectedItem(self.items()[2]);
    }
}

ko.applyBindings(new vm());