JSFiddle - React, Tailwind, and code Playground

by gurkavcu

HTML

<script src="https://raw.github.com/SteveSanderson/knockout/master/build/output/knockout-latest.debug.js"></script>
<script src="https://raw.github.com/ericmbarnard/Knockout-Validation/master/Src/knockout.validation.js"></script>
<script src="https://raw.github.com/SteveSanderson/knockout.mapping/master/build/output/knockout.mapping-latest.js"></script>
<script src="http://cdn.kendostatic.com/2011.3.1407/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1407/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1407/styles/kendo.default.min.css">
<table>
        <thead>
            <tr>
                <th>Name</th>
            </tr>
        </thead>
        <tbody data-bind="foreach: activities">
            <tr>
                <td><input data-bind="value: Name" /></td>
                <td><a href="#" data-bind="click: $root.removeActivity">Remove</a></td>
            </tr>    
        </tbody>
</table>

JavaScript

var viewModel = function() {
        var self = this;
        this.activities = ko.observableArray([{
            'Name': 'Jack'},
        {
            'Name': 'Alice'},
        {
            'Name': 'Bob'}]);
    
        this.removeActivity = function(activity) {
            alert(self.activities);
            self.activities.remove(activity);
        },
    
        this.save = function() {}
}



ko.applyBindings(new viewModel());