JSFiddle - React, Tailwind, and code Playground

by romanych

HTML

<script src="https://raw.github.com/romanych/ko.editables/master/ko.editables.js"></script>
<button data-bind="click: addPerson">Add</button>
<button data-bind="click: resetPersons">Reset</button>
<ul data-bind="foreach: persons">
    <li data-bind="text: name, click: $root.deletePerson, css: { 'deleted-person': state() === States.Deleted }"></li>
</ul>

<pre class="debug-window" data-bind="text: ko.toJSON($data, null, 2)"></pre>

CSS

.deleted-person {
    text-decoration: line-through;
}

.debug-window {
    margin-top: 20px;
}
}

JavaScript

window.States = { "Default": 0, "Modified": 1, "Added": 2, "Deleted": 3, "Missing": 4 };

var Person = function(name, state) {
    this.name = ko.observable(name).extend({ editable: { scope: 'persons' } });
    this.state = ko.observable(state).extend({ editable: { scope: 'persons' } });
};

var ViewModel = function() {
    var self = this;
   
    self.persons = ko.observableArray().extend({ editable: true });
    
    self.addPerson = function() {
        self.persons.push(new Person("New Person", States.Default));
    };
    
    self.deletePerson = function(person) {
        person.state(States.Deleted);
    };
    
    self.resetPersons = function() {
        ko.editable.rollback('persons');
        ko.editable.beginEdit('persons');
    };
    
    self.init = function() {
        self.persons([
            new Person("John Doe", States.Default),
            new Person("Sir Foobar", States.Default)
        ]);
        /*
        ko.utils.arrayForEach(self.persons(), function(p) {
            ko.editable(person);
        });
        */
        ko.editable.beginEdit('persons');
    };
    
    self.init();
};

ko.applyBindings(new ViewModel());