title: Initialize a KnockOut model with json
body: <p>I want to init a Knockout model with as json received from the server.</p>
  
  <p>For the moment, I have this html :</p>
  
  <pre><code>&lt;div class='liveExample'&gt;   
      &lt;p&gt;First name: &lt;input data-bind='value: firstName' /&gt;&lt;/p&gt; 
      &lt;p&gt;Last name: &lt;input data-bind='value: lastName' /&gt;&lt;/p&gt; 
      &lt;h2&gt;Hello, &lt;span data-bind='text: fullName'&gt; &lt;/span&gt;!&lt;/h2&gt;  
  &lt;/div&gt;
  </code></pre>
  
  <p>And this JavaScript :</p>
  
  <pre><code>// Here's my data model
  var ViewModel = function(first, last) {
      this.firstName = ko.observable(first);
      this.lastName = ko.observable(last);
  
      this.fullName = ko.computed(function() {
          return this.firstName() + "/" + this.lastName();
      }, this);
  };
  
  var viewModel = new ViewModel();
  data = { firstName: 'test', lastName: 'bla' }; //received from the server side
  
  viewModel.firstName(data.firstName)
  viewModel.lastName(data.lastName)
  
  ko.applyBindings(viewModel);
  </code></pre>
  
  <p>It works, but if I have more fields, it can painful. </p>
  
  <p>I tried to use the mapping plugin like this :</p>
  
  <pre><code>var viewModel = new ViewModel();
  data = { firstName: 'test', lastName: 'bla' }; //received from the server side
  
  viewModel = ko.mapping.fromJSON(data, viewModel)
  
  ko.applyBindings(viewModel);
  </code></pre>
  
  <p>In this case, the method <code>fullName</code> is undefined.</p>
  
  <p>I tried to do this :</p>
  
  <pre><code>viewModel = ko.mapping.fromJSON(viewModel, data)
  </code></pre>
  
  <p>And the <code>lastName</code> and <code>firstName</code> are undefined.</p>
  
  <p>Is there a simple solution to do this?</p>
  
  <p>Thanks!</p>