JSFiddle - React, Tailwind, and code Playground

by jiggle

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/3.0.0/knockout-debug.js"></script>
<ul data-bind="foreach: items, selected: selectedItem">
 <li ><a href="#" data-bind="text: name,click:$parent.selectItemOther"></a></li>
</ul>

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

<p data-bind="with: selectedItem">
    Selected: <span data-bind="text: name"></span>
</p>

CSS

hasFocus {
    background: yellow;
  }

JavaScript

ko.bindingHandlers.selected = {
    init: function(element, valueAccessor) {
        receiver = valueAccessor();
        console.log('receiver',receiver());
        $(element).focusin(function(event){
          data = ko.dataFor(event.target)
          receiver(data);
        });
        
    }
    ,
    update:function(element,valueAccessor){
         console.log('update',element,valueAccessor()());   
    }
}

var ViewModel=function(){
    var self = this;
    var items = [{name:ko.observable("fred")},{name:ko.observable("dave")}];
    var selectedItem = ko.observable();
    console.log(items);
    
    selectedItem(items[0]);
    
    selectedItem.subscribe(function(){
       console.log('selection changed',selectedItem().name()); 
    });
    
    var selectItem=function(vm,item){
        console.log('item',item);
        console.log('vm',vm);
        vm.selectedItem(item);
    };
    
    var selectItemOther=function(item){
        var self=this;
        console.log('selectItemother item',item);
        console.log('selectItemother self', this);
        self.selectedItem(item);
    };

    console.log('selectedItem',selectedItem());    
    return{
        items:items,
        selectedItem:selectedItem,
        selectItem:selectItem,
        selectItemOther:selectItemOther
    }
        
}

var vm = new ViewModel();

ko.applyBindings(vm);