JSFiddle - React, Tailwind, and code Playground

by Leonardo Trimarchi

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.js"></script>
<link rel="stylesheet" href="http:////netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<div class="row geneassayform">
<div class="col-md-4">
    <form data-bind="with:selectedAssay">
        <div class="form-group" >
            <div><span class="h1" data-bind="text:AssayName"></span></div>
            <label for="form_geneassaycode">Gene Assay Code:</label>
            <input type="text" class="form-control" id="form_geneassaycode" placeholder="Enter Gene Assay Code" data-bind="value:AssayCode"/>         
        </div>
        <div class="form-group">
            <label for="form_geneassayname">Gene Assay Name:</label>
            <input type="text" class="form-control" id="form_geneassayname" placeholder="Enter Gene Assay Name" data-bind="value:AssayName"/>         
        </div>
        <div class="form-group">
            <label for="form_geneassaycomments">Gene Assay Comments:</label>          
            <textarea class="form-control" id="form_geneassaycomments" placeholder="Enter Gene Assay Comments(optional)" data-bind="value:Comments"></textarea>
        </div>
        <button type="submit" class="btn btn-primary" disabled="disabled">Save</button>
            
    </form>
            <button class="btn btn-primary" data-bind="click:addNewAssay">Add New Assay</button>
</div>
</div>
<div class="row">
<div class="col-md-6">
    <div class="panel panel-default">
        <div class="panel-heading">
            <span>Current Gene Assays</span>
        </div>
        <div class="panel-body">
            <!-- ko if: Assays().length > 0 -->                
                <table class="table table-condensed table-hover">
                    <tr> 
                        <th>Assay Code</th>
                        <th>Assay Name</th>
                        <th>Comments</th>          
                        <th></th>
                   ...

JavaScript

var assayData = '[{"AssayCode":"0001C","AssayName":"Assay A","Comments":"Here is the comment"},{"AssayCode":"0002D","AssayName":"Assay B","Comments":"Here is the comment for assay b"}]';

console.log(assayData);

//using the ko.mapping.fromJSON to make your rawData properties into observables, so the list updates with any changes
//download from http://knockoutjs.com/documentation/plugins-mapping.html
var assays = ko.mapping.fromJSON(assayData);
console.log(assays());
var viewModel ={};

var selectedAssay=ko.observable(); //initialize the selectedAssay which will be set by the addNewAssay function call later


//just for debugging, subscribe to the selectedAssay so we can see when it's been changed
selectedAssay.subscribe(function(){
    console.log('selected assay changed');
    console.log(selectedAssay().AssayName());
});

var addNewAssay=function(){
    //create a new Assay initializing each property to a ko.observable so the data in the list updates when the data changes in the edit screen
    var newAssay ={"AssayCode":ko.observable(""),"AssayName":ko.observable(""),"Comments":ko.observable("")};
    assays.push(newAssay);
    selectedAssay(newAssay);
}

//call addNewAssay to set the edit form to a new assay record at initialisation
//addNewAssay();



viewModel.Assays=assays;
viewModel.selectedAssay=selectedAssay;
viewModel.addNewAssay=addNewAssay;


ko.applyBindings(viewModel);