Conversation Mapping

by bringmebeer

HTML

<script src="http://jquery-json.googlecode.com/files/jquery.json-2.3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/2.2.1/knockout-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.3.5/knockout.mapping.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div data-bind="with: conversation">
  <div data-bind="text: subject"></div> 
</div>

  <div data-bind="foreach: conversation">
    <div data-bind="foreach: messages">
       <div class="well"> 
          <div data-bind="text: sender_name"></div> 
          <div data-bind="text: subject"></div>
          <div data-bind="text: body"></div>
          <div data-bind="text: updated_at"></div> 
        </div>    
    </div>
  </div>

JavaScript

// Sample JSON to return for initialization; 2 second delay

var conversationData = {
    json: $.toJSON(
            {"id":8,"subject":"Hello JB! Email two!",
             "updated_at":"Sep 27",
             "originator":"José Pablo",
             "count_messages":"(2)",
             "messages":[{"subject":"RE: Hello JB! Email two!",
                          "body":"Thanks for the message!",
                          "sender_name":"Zapnito CTO","updated_at":"Sep 27"},
                         {"subject":"Hello JB! Email two!",
                          "body":"Body text",
                          "sender_name":"José Pablo",
                          "updated_at":"Sep 27"}
                        ]
            }
    ),
    delay: 1
}



function Conversation(data) {
    ko.mapping.fromJS(data, {}, this);
}

function Message(data) {    
    ko.mapping.fromJS(data, {}, this);
}

var map = {
    create: function(options) {
      return new Conversation(options.data);
    },
    messages: function(options) { 
      return new Message(options.data);
    }
}


var ViewModel = function() {
    var self = this;
    self.conversation = ko.observable();
    	    
      // Use JSFiddle echo to simulate an AJAX service
      (function() {
        $.ajax({ url:"/echo/json/", data:conversationData, type:"POST",
                 success:function(data)
                 {
                   // Map the returned JSON to the View Model  
                   ko.mapping.fromJSON(data, map, self.conversation);
                 }
               });
       })();  

    console.log(self.conversation());
    
};

ko.applyBindings(new ViewModel());