KnockoutJS: Adding Observable Properties and Functions to objects in a mapping generated ObservableArray

http://stackoverflow.com/questions/8401799/knockoutjs-adding-observable-properties-and-functions-to-objects-in-a-mapping-g

by rniemeyer

HTML

<script src="http://knockoutjs.com/downloads/knockout-2.2.1.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: $root.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 viewModel = {
    users: ko.observableArray([]),
    toggleIsActive: function(user) {
       user.IsActive(!user.IsActive());   
    }
};

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

ko.applyBindings(viewModel);