JSFiddle - React, Tailwind, and code Playground

by bookamp

HTML

<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-2.1.0.debug.js"></script>
<script src="https://raw.github.com/SteveSanderson/knockout.mapping/master/build/output/knockout.mapping-latest.debug.js"></script>

<button data-bind='click: addAddress'>Add Address</button> 

<div  data-bind="foreach: address">
<table class="AddressBlock">
    <tbody >
        <tr>
            <td>
                &nbsp;
            </td>
            <td>
                <input class="sDatePicker" data-bind="value: SMMDD" />                
            </td>
            <td>
                <input class="sDatePicker" data-bind="value: EMMDD" />                
            </td>
        </tr>
        <tr>
            <td>Street 1</td>
            <td colspan="2">
                <input data-bind="value: ADDR_L1" />
            </td>
        </tr>
        <tr>
            <td>Street 2</td>
            <td colspan="2">
                <input data-bind="value: ADDR_L2" />
            </td>
        </tr>
        <tr>
            <td>Street 3</td>
            <td colspan="2">
                <input data-bind="value: ADDR_L3" />
            </td>
        </tr>
    </tbody>
</table>
</div>

JavaScript

var model = {
    "details": {
        "KEY": "1",
        "NICKNAME": "XYZ",
        "SEP_YR": "FY 2007"
    },
    "address": [
        {
        "ADDR_L1": "XYZ",
        "ADDR_L2": "ABC",
        "ADDR_L3": "",
        "SMONTH": "12",
        "SDAY": "02",
        "EMONTH": "06",
        "EDAY": "22",
        "MODIFIED" : false
    },
    {
        "ADDR_L1": "GHJ",
        "ADDR_L2": "",
        "ADDR_L3": "",
        "SMONTH": "01",
        "SDAY": "02",
        "EMONTH": "08",
        "EDAY": "21",
        "MODIFIED" : false
    }
    ]
}
$(function() {
    var Address = function(options) {
        ko.mapping.fromJS(options.data, {}, this);
    var self = this;
        self.SMMDD = ko.computed({
            read: function() {
                if ($.isFunction(self.SMONTH)) {
                    return self.SMONTH() + "/" + self.SDAY();
                }
            },
            write: function(value) {
                self.SMONTH(value.substring(0, 2));
                self.SDAY(value.substring(2, 4));
            },
            owner: self
        });
        self.EMMDD = ko.computed({
            read: function() {
                if ($.isFunction(self.EMONTH)) {
                    return self.EMONTH() + "/" + self.EDAY();
                }
            },
            write: function(value) {
                self.EMONTH(value.substring(0, 2));
                self.EDAY(value.substring(2, 4));
            },
            owner: self
        });


    }

    var mappingoptions = {
        "address": {
            create: function(options) {
                return new Address(options);
            }
        }
    }

    var baseModel = {
        addAddress: function() {
            this.address.push(new Address({
                data: ko.mapping.toJS(viewModel).address[0]
            }));
            $(".AddressBlock:last input").val("");
        }
    };

    var viewModel = ko.mapping.fromJS(model, mappingoptions, baseModel);
   ...