JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<script src="http://knockoutjs.com/downloads/knockout-2.2.1.js"></script>
<div data-bind="foreach: views">
     <a href="#" data-bind="visible: isDisplayed, text: title, click: $root.selectedView"></a>&nbsp;
</div>
<hr/>

<div data-bind="with: selectedView">
    <div data-bind="template: { name: templateName, data: data }"></div>
</div>
<div data-bind="text: ko.toJSON(views)"></div>

<script id="wannTmpl" type="text/html">
    Am: <input data-bind="value: eventDate" />
    Von:  <input data-bind="value: startTime" />
    Bis:  <input data-bind="value: endTime" />
</script>

<script id="wasTmpl" type="text/html">
    Art der Leistung: <input data-bind="value: kindOfWork" />
    
    <label class="control-label" for="anfrageWasBereich">Im Bereich:</label>
    <div class="controls">
        <select data-bind="options: choices, value: anfrageWasBereich"></select>
    </div>

</script>

<script id="woTmpl" type="text/html">
    Institution: <input data-bind="value: institution" />
    Strasse:  <input data-bind="value: street" />
    Nr:  <input data-bind="value: houseNumber" />
    PLZ:  <input data-bind="value: postalCode" />
    Ort:  <input data-bind="value: place" />
</script>

<script id="rechnungTmpl" type="text/html">
    Institution: <input data-bind="value: institution" />
    Adresse:  <input data-bind="value: adresse" />
    Kontakte:  <input data-bind="value: contact" />
    Sachbearbeiter:<input data-bind="value: administrator" />
    Abteilung: <input data-bind="value: department" />
    Rechnungsnummer: <input data-bind="value: invoiceNumber" />
    Rechnungsdatum: <input data-bind="value: invoiceDate" />
    Kosten: <input data-bind="value: charge" />
    Erinnert: <input data-bind="value: reminded" />
    Erledigt: <input data-bind="value: settled" />
</script>

JavaScript

var View = function sendToServer(title, templateName, data, isDisplayed) {
   this.title = title;
   this.templateName = templateName;
   this.data = data; 
   this.isDisplayed = isDisplayed;
};
View.prototype.toJSON = function() {
    var copy = ko.toJS(this); //easy way to get a clean copy
    delete copy.full; //remove an extra property
    return copy; //return the copy to be serialized
}
//======WANN========================
var subModelA = {
    eventDate: ko.observable(""),
    startTime: ko.observable(""), 
    endTime: ko.observable("") 
};
//=======WAS========================= 
var subModelB = {
    kindOfWork: ko.observable(""),
    anfrageWasBereich : ko.observable("Sonstiges"),
    choices : ["Arbeit", "Arzt", "behoerde", "Bildung", "Freizeit", "Gericht", "Sonstiges"]
};
//========WO=========================
var subModelC = {
    institution: ko.observable(""),
    street: ko.observable(""),
    houseNumber: ko.observable(""), 
    postalCode: ko.observable(""), 
    place: ko.observable("") 
};
//========RECHNUNG====================
var subModelD = {
    institution: ko.observable(""),
    adresse: ko.observable(""), 
    contact: ko.observable(""),
    administrator: ko.observable(""),
    department: ko.observable(""),
    invoiceNumber: ko.observable(""),
    invoiceDate: ko.observable(""),
    charge: ko.observable(""),
    reminded: ko.observable(""),
    settled: ko.observable(""),
};
//===========VISIBILITY===============
var visibilityFalse = ko.observable(false),
    visibilityTrue = ko.observable(true);

var viewModel = {
    views: ko.observableArray([
        new View("wann?", "wannTmpl", subModelA, visibilityTrue),
        new View("was?", "wasTmpl", subModelB, visibilityTrue),
        new View("wo?", "woTmpl", subModelC, visibilityTrue),
        new View("rechnung", "rechnungTmpl", subModelD,visibilityFalse)
        ]),
    selectedView: ko.observable() 
    
};
//inialize to the first section

ko.applyBindings(viewModel);