JSFiddle - React, Tailwind, and code Playground

by maxgrr

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<h1> Witnesses </h1>

<br/>Were there any witnesses?
<input type='checkbox' data-bind='checked: wereThereAnyWitnesses' id='witnessSlider' style='width:40px;'></input>
<br/>
<br/>

<div data-bind='foreach: witnesses'>
    <div class='well'>
        <button type="button" class="btn btn-xs btn-warning pull-right" data-bind='visible: $parent.numWitnesses() > 1, click: $parent.removeWitness'>Delete Witness</button>
        <br/>
        <div>First Name</div>
        <input type='text' data-bind='value: first_name' required/>
        <div>Witness Statement</div>
        <textarea data-bind='value: statement' required></textarea>
    </div>
</div>
<button type="button" class="btn btn-sm btn-primary" data-bind='click: addWitness'>Add Witness</button>

JavaScript

var initialWitnesses = [{
    "first_name": "John",
    "statement": "I didn't see nuttin"
  }, 
  {
    "first_name": "Jane", "statement": "John deed eet!"
  }];

var Witness = function(data){
    var self = this;
    self.first_name = ko.observable('');
    self.statement = ko.observable('');
    
    if (typeof data !== 'undefined' && data) {
        self.first_name = ko.observable(data.first_name);
        self.statement = ko.observable(data.statement);
    }
};

var murderCaseModel = function (witnesses) {
    var self = this;

    // Simple attribute declarations 
    self.title = ko.observable("Double Murder on Elm Street");
  
    // Arrays
    self.witnesses = ko.observableArray([]);
    
    // If there are original witnesses passed in, create them
    if (typeof witnesses !== 'undefined' && witnesses) {
        $.each(witnesses, function(i, el) {
            self.witnesses.push(new Witness(el));
        });
    }

    // WITNESS MANAGEMENT ========================
    self.addWitness = function() {
        self.witnesses.push(new Witness());
    };

    self.removeWitness = function (witness) {
        self.witnesses.remove(witness);
    }; 
    self.numWitnesses = function() {
        return self.witnesses().length;
    };

    (function() {
        var initialValue = self.numWitnesses() > 0;
        var value = ko.observable(initialValue);
        self.wereThereAnyWitnesses = ko.computed({
        read: function(){
            console.log(value());
            return value();
        },
            write: function(wereThereAnyWitnesses) {
                if (!wereThereAnyWitnesses && self.numWitnesses() > 0) {
                    if (!confirm("Remove all current witnesses?"))
                        return self.wereThereAnyWitnesses.notifySubscribers();
                    else
                        self.witnesses.removeAll();
                }
    
                if (wereThereAnyWitnesses && self.numWitnesses() == 0)
                   ...