Can't extend KO mapping for more than one propery

Question

KO beginner: In the following implementation of a search results module I map the searchData JSON array to my view model using the mapping plugin. I also created two extra properties to display a manipulated version of some of my data:

define('searchresults', ['ko', 'lodash', 'datacontext', 'moment'], function (ko, _, datacontext, moment) {

    var get = function (term) {
        amplify.request("appsearch", { 'searchterm': term }, function (searchData) {

            var viewModel = {};

            var mapping = {
                'untilNow' : {
                    create: function (options) {
                        var innerModel = ko.mapping.fromJS(options.data);
                        innerModel.untilNow = moment(innerModel.lastSentDate()).fromNow();
                        return innerModel;
                    }
                },
                'iconClass': {
                    create: function (options) {
                        var innerModel = ko.mapping.fromJS(options.data);
                        innerModel.iconClass = "icon-" + innerModel.type();
                        return innerModel;
                    }
                }
            };

            viewModel.searchResults = ko.mapping.fromJS(searchData, mapping.untilNow);
            ko.applyBindings(viewModel);
        });
    };
    return {
        get: get
    };
});

This gets called in order to populate the following template:

<div id="contacts" class="view animated fadeInLeft">

    <h3>Search results for {{#routeData}}{{term}}{{/routeData}}</h3>
    <ul data-bind="template: { name: 'searchresults-template', foreach: searchResults }"></ul>

</div>

<script type="text/html" id="searchresults-template">

    <!--<li data-bind="attr: {'class': iconClass}">-->
    <li>
        <h4><span data-bind="text: type"></span></h4>
        <p><b>When created:</b> <span data-bind="text: untilNow"></span></p>
        <p><b>By:</b> <span data-bind="text: createdBy"></span></p>        
        <p><b>Company:</b> <span data-bind="text: company"></span></p>
        <hr/>
    </li>

</script>

<script>
    require(['searchresults'], function (searchresults) {
        var searchTerm = "{{#routeData}}{{term}}{{/routeData}}";
        searchresults.get(searchTerm);
    });
</script>

What I can't understand is:

• Why in mapping.untilNow I can't just use mapping as apparently KO only expects an {}. Which consequently I can't use the iconClass as it becomes undefined.
• What am I doing wrong that I have to repeat the innerModel implementation. How can I abstract that out of the properties KO style!
• Also I find it a bit dodgy that I have to assign the ko.mapping to the viewModel.searchResults and not just the viewModel but its the only way I could have something for mt template to iterate through.

Am I not understanding some fundamental aspect of KO? Is this the right way to get data and apply it to a template and add some methods to manipulate parts of it?

Thanks a bunch

sample stream of of searchData:

[
    {
        "type": "Campaign",
        "lastSentDate": "/Date(634873003155215782)/",
        "createdBy": "Stephen Parker",
        "company": "Virgin Media"
    },
    {
        "type": "Person",
        "lastSentDate": "/Date(1198908717056-0700)/",
        "createdBy": "John Smith",
        "company": "Concep LTD"
    },
    {
        "type": "Campaign",
        "lastSentDate": "\/Date(1239018869048)\/",
        "createdBy": "Stephen Parker",
        "company": "Virgin Media"
    },
    {
        "type": "Company",
        "lastSentDate": "/Date(1198908717056-0700)/",
        "createdBy": "Stephen Parker",
        "company": "Virgin Media"
    }
]

Answer 1

define('searchresults', ['ko', 'lodash', 'datacontext', 'moment'], function (ko, _, datacontext, moment) {

    var get = function (term) {
        amplify.request("appsearch", { 'searchterm': term }, function (searchData) {

            var resultsItem = function (data) {
                var self = this;
                self.id = ko.observable(data.id);
                self.type = ko.observable(data.type);
                self.lastSentDate = ko.observable(data.lastSentDate);
                self.createdBy = ko.observable(data.createdBy);
                self.company = ko.observable(data.company);
                self.untilNow = ko.computed(function () {
                    return moment(self.lastSentDate()).fromNow();
                });
                self.iconClass = ko.computed(function() {
                    return "icon-" + self.type().toLowerCase();
                });
            };

            var dataMappingOptions = {
                key: function(data) {
                    return data.id;
                },
                create: function (options) {
                    return new resultsItem(options.data);
                }
            };

            var viewModel = {
                searchResults: ko.mapping.fromJS([])                
            };

            ko.mapping.fromJS(searchData, dataMappingOptions, viewModel.searchResults);
            ko.applyBindings(viewModel);
        });
    };
    return {
        get: get
    };
});