title: How to use ko.mapping.fromJS to fill an observableArray with data from an Ajax call?
body: <p>I have a view which contains a template that has a foreach to loop round an array of models. However, the array of models comes from an ajax call.</p>
  
  <p>Here is an example of the scenario:</p>
  
  <pre><code>// Contained Model
  function SomeModel() {
      var self = this;
      this.Firstname = ko.observable();
      this.Lastname = ko.observable();
      this.Fullname = ko.dependentObservable(function() {
          return this.Firstname + " " + this.Lastname;
      }, self);
  }
  
  // View Model
  function SomeViewModel() {
      var self = this;
  
      this.ArrayOfModels = ko.mapping.fromJS([]);
  
      this.GetModelsByAjax = function() {
          $.ajax(...);
      };
  
      this.SuccessfullyRetrievedModelsFromAjax = function(models) {
          ko.mapping.updateFromJS(self.ArrayOfModels, models);
      };
  }
  
  ko.applyBindings(new SomeViewModel());
  </code></pre>
  
  <p>Here's the View:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;HtmlGuff&gt;
      &lt;div data-bind="template: {name: 'model-template', foreach: ArrayOfModels}"&gt;&lt;/div&gt;
  &lt;/HtmlGuff&gt;
  
  // Template
  &lt;HtmlGuff&gt;
      &lt;h2 data-bind="text: Fullname"&gt;
      &lt;div data-bind="text: Firstname" /&gt;
      &lt;div data-bind="text: Lastname" /&gt;
  &lt;/HtmlGuff&gt;
  </code></pre>
  
  <p>And this is the json result from the ajax call:</p>
  
  <pre><code>[{
      "Firstname": "Joe",
      "Lastname": "Blogs"
  }, {
      "Firstname": "Foo",
      "Lastname": "Bar"
  }]
  </code></pre>
  
  <p>Currently I am just passing in <code>[]</code> to the model declaration, however I keep getting the following error:</p>
  
  <blockquote>
    <p>Firstname is not defined  </p>
  </blockquote>
  
  <p>It breaks on this: <code>return new Function("jQuery","$item", body);</code>.</p>
  
  <p>Is there any way to do what I want to?</p>