KnockoutJS: Adding Observable Properties after mapping

by ksumarine

HTML

<script src="http://knockoutjs.com/downloads/knockout-2.0.0.js"></script>
<script src="https://rawgithub.com/SteveSanderson/knockout.mapping/master/build/output/knockout.mapping-latest.debug.js"></script>
<table>
    <thead>
        <tr>
            <td></td>
            <td>Name</td>
            <td>Email Address</td>
            <td>Active?</td>
            <td>Created</td>
        </tr>
    </thead>
    <tbody data-bind="foreach: users">
        <tr data-bind="attr: { id: ('user-' + Id()) }">
            <td class="quiet"><span data-bind="text: Id"></span></td>
            <td><span data-bind="text: Name"></span></td>
            <td><a data-bind="attr: { href: ('mailto:' + EmailAddress()) }"><span data-bind="text: EmailAddress"></span></a></td>
            <td>
                <a href="#" data-bind="click: toggleIsActive"><span data-bind="text: IsActive"></span></a>
            </td>
            <td><span data-bind="text: CreatedDate"></span></td>
        </tr>
    </tbody>
</table>

CSS

td { padding: 5px; }

JavaScript

var userMapping = {
    users: {
        key: function(item) {
            return ko.utils.unwrapObservable(item.Id);
        },
        create: function(options) {
            return createUser(options.data);
        }
    }   
};

var createUser = function(user) {
    var result = ko.mapping.fromJS(user);
    result.toggleIsActive = function() {       
        result.IsActive(!result.IsActive());  
    };
    return result;
};
    
// JSON call replaced with values
var viewModel = ko.mapping.fromJSON('{ "users": [{"Id":1,"Name":"Andrew","EmailAddress":"[email protected]","IsActive":true,"CreatedDate":"1 Dec 2011"}] }', userMapping, {});

ko.applyBindings(viewModel);