JSFiddle - React, Tailwind, and code Playground

by vyshniakov

HTML

<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.1.0.js"></script>
<script src="https://raw.github.com/SteveSanderson/knockout.mapping/master/build/output/knockout.mapping-latest.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<table>
    <th>User Name</th>
    <th>Is Active</th>
    <tbody data-bind="foreach: users">
        <tr>
            <td data-bind="text: username"></td>
            <td data-bind="text: isActive"></td>            
        </tr>
    </tbody>
</table>

<button data-bind="click: save">Save</button>

JavaScript

var jsonData = {
    users: [{
        username: 'users1',
        isActive: 1,
        startDate: '2001-03-22T00:00:00CET'},
    {
        username: 'users2',
        isActive: 0,
        startDate: '2008-03-22T00:00:00CET'}]
};

var mappingSetting = {
    'users': {
        create: function(options) {
            options.data.isActive = options.data.isActive == 1 ? 'Yes' : 'No';
            return options.data;
        }
    }
};

var viewModel = {};
viewModel = ko.mapping.fromJS(jsonData, mappingSetting);

var options = {
    'users': {
        create: function(options) {
            console.log(options);
            options.data.isActive(options.data.isActive() == 'Yes' ? 1 : 2);
            return options.data;
        }
    }
};

viewModel.save = function() {
    var dataToSave = ko.mapping.toJS(viewModel, options);
    //console.log(dataToSave);
};

ko.applyBindings(viewModel);