JSFiddle - React, Tailwind, and code Playground

HTML

<div id="content">
    <ul id="list" data-bind="foreach: list">
        <li data-bind="text: name, click: $parent.selectItem"></li>
    </ul>
</div>
<div data-bind="with: selectedItem"> <span data-bind="text: name"></span>

</div>
<div> <span data-bind="text: selectedItem() && selectedItem().name()"></span>

</div>

JavaScript

Model = function (name) {
    this.name = ko.observable(name);
}

ViewModel = function () {


    var list = ko.observableArray([new Model("Apple"), new Model("Pear")]),
        selectedItem = ko.observable();

    function selectItem(item) {
        selectedItem(item);
    }

    return {
        list: list,
        selectedItem: selectedItem,
        selectItem: selectItem
    };
};

ko.applyBindings(new ViewModel());