JSFiddle - React, Tailwind, and code Playground

by Salmin Skenderovic

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout-validation/2.0.3/knockout.validation.js"></script>


<h4 class="">persons</h4>
<ul data-bind="foreach: persons" class="inline-list">
    <li>
        <a class="small success round button split" data-bind="click: $parent.presentPerson"><h2 data-bind="text: name"></h2> <span data-dropdown="drop"></span></a><br>
        <ul id="drop" class="f-dropdown" data-dropdown-content>
            <li><a data-bind="click: $parent.removePerson">Remove</a></li>
        </ul>
    </li>
</ul>

JavaScript

function AppViewModel() {
         var self = this;

        self.persons = ko.observableArray([
            { name: 'Bert', age: 30, hobbies :["music","computers"] },
            { name: 'Charles', age : 31, hobbies :["sports"] },
            { name: 'Denise', age: 32 , hobbies :["art", "fashion", "games"]}
        ]);


        self.removePerson = function() {
            self.persons.remove(this);
        };

        self.presentPerson = function () {
            var person = this;
            window.alert(person.name + " " + person.age);
        };
    }

    // Activates knockout.js
    ko.applyBindings(new AppViewModel());