title: KnockoutJS Mapping Plugin (observableArray)
body: <p>I am new to knockout and I am having a problem with using the mapping plugin as I do not understand how it maps my JSON data. <br/>
  This is a sample json data similar to what is in my program:</p>
  
  <pre><code>contact: {
          name : 'John',
          email : 'address@domain.com',
          phones : [{
              phoneType : 'Home Phone',
              phoneNumber: '999-888-777'},
              {
              phoneType : 'Business Phone',
              phoneNumber: '444-888-777'},
              }]
          }
  </code></pre>
  
  <p>As you can see, this json data contains an array of phones. <br />
  I used knockout mapping plugin and I can bind the 'name', 'email' and loop the phone numbers in a 'foreach: phones' with no hassle until I try to make a ko.compute on the phoneNumber which is an object in the array phones. <br /></p>
  
  <pre><code>@section scripts
  {
      &lt;script src="~/ViewModels/ContactModel.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
          var viewModel = new ContactModel(@Html.Raw(Model.ToJson()));
          $(document).ready(function () {
              ko.applyBindings(viewModel);
          });
  &lt;/script&gt;
  
  &lt;label&gt;Name&lt;/label&gt;&lt;input data-bind="value: name" /&gt;
  &lt;label&gt;Email&lt;/label&gt;&lt;input data-bind="value: email" /&gt;
  &lt;label&gt;Phones&lt;/label&gt;
  &lt;table&gt;
    &lt;tbody data-bind="foreach: phones"&gt;
       &lt;tr&gt;
        &lt;td&gt;&lt;strong data-bind='text: phoneType'&gt;&lt;/strong&gt;&lt;/td&gt;
        &lt;td&gt;&lt;input data-bind='value: phoneNumber' /&gt;&lt;/td&gt;
       &lt;/tr&gt;
     /tbody&gt;
   &lt;/table&gt;
  </code></pre>
  
  <p>This is ContactModel.js</p>
  
  <pre><code>    var ContactModel = function (data) {
      var self = this;
      ko.mapping.fromJS(data, {}, self);
  
      self.reformatPhoneNumber = ko.computed(function(){
      var newnumber;
      newnumber = '+(1)' + self.phones().phoneNumber;
      return newnumber;
      });
  
      };
  </code></pre>
  
  <p>For visual representation this is how this looks right now: <br /></p>
  
  <pre><code>Name: John
  Email: address@domain.com
  Phones:
  &lt;--foreach: phones --&gt;
  Home Phone: 999-888-777
  Business Phone: 444-888-777
  </code></pre>
  
  <p>What Im trying to do is to reformat the phoneNumber to display it this way:</p>
  
  <pre><code>Name: John
  Email: address@domain.com
  Phones:
  &lt;--foreach: phones --&gt;
  Home Phone: (+1)999-888-777
  Business Phone: (+1)444-888-777
  </code></pre>
  
  <p>I try to do it by using the reformatPhoneNumber in place of phoneNumber in my binding like this:</p>
  
  <pre><code>&lt;table&gt;
        &lt;tbody data-bind="foreach: phones"&gt;
           &lt;tr&gt;
            &lt;td&gt;&lt;strong data-bind='text: phoneType'&gt;&lt;/strong&gt;&lt;/td&gt;
            &lt;td&gt;&lt;input data-bind='value: $root.reformatPhoneNumber' /&gt;&lt;/td&gt;
           &lt;/tr&gt;
         /tbody&gt;
       &lt;/table&gt;
  </code></pre>
  
  <p>But when I do, the value of reformatPhoneNumber doesn't appear.
  I read somewhere here that I have to make the objects inside my observableArray also observable because ko.mapping doesn't do that by default. But I cannot picture how to do it as I was expecting ko.mapping plugin to do all the job automatically for me as I am new to this jslibrary. <br />
  Any help would be greatly appreciated. Thank you very much!!</p>