title: Knockoutjs populating data from server with MVC
body: <p>I am trying to populate knockoutjs viewmodel with some initial values from the server, I am using ASP.Net MVC so the way I am doing it is passing a mvc viewmodel to the view:</p>
  
  <pre><code>public ActionResult Edit(int cvId)
  {
      CV cv = repository.FindCV(cvId);
  
      //auto mapper mapping
      Mapper.CreateMap&lt;CV, MyCVViewModel&gt;();
      Mapper.CreateMap&lt;Company, MyCompanyViewModel&gt;();
      Mapper.CreateMap&lt;Education, MyEducationViewModel&gt;();
      Mapper.CreateMap&lt;Reference, MyReferenceViewModel&gt;();
      var model = Mapper.Map&lt;CV, MyCVViewModel&gt;(cv);
  
      return View(model);
  }
  </code></pre>
  
  <p>Inside the view I convert the viewmodel into json string and bind it to knockoutjs viewmodel, so it gets populated with data:</p>
  
  <pre><code>//mvc viewmodel
  @model Taw.WebUI.Models.MyCVViewModel
  //convert
  @{
      var json = @Html.Raw(Model.ToJson());
  }
  
  //lastly bind
  &lt;script type="text/javascript"&gt;
      // Activate knockout binding
      var viewModel = new CVViewModel(@json);
      ko.applyBindings(viewModel);
  &lt;/script&gt;
  </code></pre>
  
  <p>and inside my knockout javascript, i populate knockout viewmodel with the data:</p>
  
  <pre><code>var CVViewModel = function (data) {
      var self = this;
  
      //list view model
      self.title = ko.observable(data.title);
      self.statement = ko.observable(data.statement);
      self.reference = ko.observable(data.reference);
      self.companies = ko.observableArray(data.companies);
      self.educations = ko.observableArray(data.educations);
      self.references = ko.observableArray(data.references);
  }
  </code></pre>
  
  <p>Everything gets populated at this stage:</p>
  
  <p><img src="https://i.stack.imgur.com/oSnYn.png" alt="enter image description here"></p>
  
  <p>and the resulting json string is:</p>
  
  <p><img src="https://i.stack.imgur.com/znZff.png" alt="enter image description here"></p>
  
  <p><strong><em>Questions:</em></strong></p>
  
  <p><strong>1. The problem is that some values don't bind when I change them, only title and statement changes:</strong></p>
  
  <p><img src="https://i.stack.imgur.com/ftwUv.png" alt="enter image description here"></p>
  
  <p>Resulting json, as you can see, only title and statement changes, and values inside company don't change
  <img src="https://i.stack.imgur.com/dQutj.png" alt="enter image description here"></p>
  
  <p><strong>2. When saving this data again, how can I let server side know what has been edited and what has been deleted, how to keep track of them using MVC and entity framework, and change database accordingly</strong></p>
  
  <p><strong>Update</strong></p>
  
  <p>My knockout javascript, I already have these observables defined, how do define them in the observablearray</p>
  
  <pre><code>function Company() {
      this.companyName = ko.observable();
      this.jobTitle = ko.observable();
      this.description = ko.observable();
      this.startDate = ko.observable();
      this.endDate = ko.observable();
  }
  </code></pre>