JSFiddle - React, Tailwind, and code Playground

by ZenMaster

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/3.0.0/knockout-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.js"></script>
<div>
    <ul data-bind="foreach: a.items">
        <li data-bind="click: $root.select, text: name"></li>
    </ul>
</div>
<div data-bind="with: selected">
    <span data-bind="text: name"></span>
</div>

CSS

li {
    border: 1px solid #ccc;
    height: 44px;
}

JavaScript

var data = {
    a: {
        items: [{name: 'name 1'}, {name: 'name 2'}, {name: 'name 3'}]
    },
    selected: undefined,
    select: function(item) {
        mapped.selected(item)
    }
};

var mapped = ko.mapping.fromJS(data, {
    items: {
        key: function(item) {
            return item.name;
        }
    }
});

ko.applyBindings(mapped);