JSFiddle - React, Tailwind, and code Playground

by Mohammed Ismail Ansari

HTML

<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.js"></script>
<div id="people" data-bind="foreach: people">
    <span data-bind="text: firstName + ' ' + lastName"></span>
    <button data-bind="event: { mouseover: $root.selectPerson }">Select</button>
    <br />
</div>
<br /><br />
<div data-bind="with: selectedPerson">
    <span data-bind="text: firstName"></span>
    <span data-bind="text: lastName"></span>
</div>

CSS

body
{
    font-family: Arial;
}

JavaScript

// Event Binding

// Our viewmodel with observables
function viewmodel() {
    self = this;
    
    // List of people
    this.people = ko.observableArray([
        { firstName: 'John', lastName: 'Shepard' },
        { firstName: 'Kaidan', lastName: 'Alenko' },
        { firstName: 'Ashley', lastName: 'Williams' }
    ]);
    
    // Holds the reference to the selected people
    this.selectedPerson = ko.observable();
    
    // Select a specific person
    this.selectPerson = function(data, event){
        self.selectedPerson(data);
    };
}

// Runs at document load
$(document).ready(function(){
    // Create an instance of the viewmodel
    var myViewmodel = new viewmodel();
    
    // Bind the instance to the view
    ko.applyBindings(myViewmodel);
});