mapping plugin

https://groups.google.com/d/topic/knockoutjs/wqLIB8H_pZ8/discussion

by rniemeyer

HTML

<script src="http://github.com/downloads/SteveSanderson/knockout/knockout-2.1.0.js"></script>
<script src="https://raw.github.com/SteveSanderson/knockout.mapping/master/build/output/knockout.mapping-latest.debug.js"></script>
<ul data-bind="template: { foreach: items }">
    <li><span data-bind="text: jobTitle"></span></li>
</ul>

<!--<button data-bind="click: update">Update</button>-->

<aside id="searchFilters">

<ul id="headings">
<li>
You searched for
</li>

<li>
Refine your Search
</li>
</ul>
 <a href="#" class="jobAttribute">By Classifications</a>
<ul>
    <li><a id="admin|classification" href="#">admin ( 1 jobs )</a></li>
    <li><a id="hey there|classification" href="#">hey there ( 1 jobs )</a></li>
    </ul>
    <a href="#" class="jobAttribute">Locations</a>
    <ul>
    <li><a id="Melbourne|location" href="#">Melbourne ( 1 jobs )</a></li>
    <li><a id="Brisbane|location" href="#">Brisbane ( 1 jobs )</a></li>
    </ul>
   

    
</aside>

JavaScript

var data = [{"jobTitle":"Digital designer","dateCreated":"7/7/2012","timeCreated":"2:27 PM","location":"Perth","jobSummary":"one\ntwo\nthree","Uri":"/candidates/view-all-jobs/digital-designer/","CreateDate":"\/Date(1341635236000)\/"},{"jobTitle":"Presentation Specialist - desktop publisher","dateCreated":"7/7/2012","timeCreated":"2:26 PM","location":"Brisbane","jobSummary":"One-to-one support to VP\n    Truly diverse role\n    Very satisfying amount of autonomy and responsiblity!","Uri":"/candidates/view-all-jobs/presentation-specialist-desktop-publisher/","CreateDate":"\/Date(1341635201000)\/"},{"jobTitle":"Administration Manager","dateCreated":"7/7/2012","timeCreated":"2:23 PM","location":"Melbourne North Shore & Northern Beaches ","jobSummary":"One-to-one support to VP\n    Truly diverse role\n    Very satisfying amount of autonomy and responsiblity!","Uri":"/candidates/view-all-jobs/administration-manager/","CreateDate":"\/Date(1341634991000)\/"}];

var newdata = [{"jobTitle":"Sean designer","dateCreated":"7/7/2012","timeCreated":"2:27 PM","location":"Perth","jobSummary":"one\ntwo\nthree","Uri":"/candidates/view-all-jobs/digital-designer/","CreateDate":"\/Date(1341635236000)\/"}];

//for efficiency create this function once
var fullDate = function() {
    return this.dateCreated() + " " + this.timeCreated();
};

var mappingOptions = {
    create: function(options) {
       var result = ko.mapping.fromJS(options.data);
       result.fullDate = ko.computed(fullDate, result);
       return result;
    }        
};


             $('#searchFilters a').bind('click', function () {
                 
                    //call the update function here
                 
                    return false;
                });

$.ajax({ url:"/echo/json/", data:data, type:"POST",
             success:function(data)
             {
               // Map the returned JSON to the View Model  
              
                var viewModel = {
                    items:...