JSFiddle - React, Tailwind, and code Playground

by nyothecat

HTML

<h2>Participants</h2>
Here are the participants:
<div data-bind="with: participants">
    <div data-bind="template: { name: 'person-template', data: buyer }"></div>
    <div data-bind="template: { name: 'person-template', data: seller }"></div>
    <script type="text/html" id="person-template">
        <h3 data-bind="event: {mouseover: $parents[1].myOver.bind($data, $parentContext, $parents[1])}, text: name" > </h3>
    <p>Credits: <span data-bind="text: credits"></span > </p>
    </script>
</div>

JavaScript

function MyViewModel() {
         var self = this;
         this.participants = {
             buyer: {
                 name: 'Franklin',
                 credits: 250
             },
             seller: {
                 name: 'Mario',
                 credits: 5800
             }
         }
         this.myOver = function (parentContext, parents1) { 
             alert("Data: " + JSON.stringify(parents1)); 
         }
     }
     ko.applyBindings(new MyViewModel());