title: How to bind observableArray by index to the element
body: <p>I've been developing a web application that will display a table containing list of candidates. I want to display the candidate collection (get from the server) to the table, but with fixed row count to display, let's say 5 rows. So if the collection only have 2 candidates, the table will be having 5 rows, with the only first 2 rows contains the data, and the remaining 3 are empty rows.</p>
  
  <p>I couldn't use the foreach binding to solve this, so I tried <a href="http://jsfiddle.net/tyrsius/GB4ae/" rel="nofollow noreferrer">this post</a>. </p>
  
  <p>In that post the objects inside observableArray are not observable, so I tried to make them observable and it still works. But when I try in my code, it throws error in my js:</p>
  
  <pre><code>Unable to process binding "text: function (){return Candidates[0]().CandidateNumber }"
  Message: AssignedCandidates[0] is not a function
  </code></pre>
  
  <p>I'm still not sure what I'm missing. Please help.</p>
  
  <p>This is my js file:</p>
  
  <pre><code>var CandidateViewModel = function (data) {
      var self = this;
      self.CandidateId = ko.observable();
      self.CandidateNumber = ko.observable();
      self.Name = ko.observable();
      self.Status = ko.observable()
      ko.mapping.fromJS(data, {}, self);
  }
  
  var mappingCandidateList = {
      Candidates: {
          create: function (options) {
              return new CandidateViewModel(options.data);
          }
      }
  }
  
  var CandidateListViewModel = function (data) {
      var self = this;
      self.Candidates = ko.observableArray();
      self.AssignedCount = ko.observable();
      self.ProcessingCount = ko.observable();
      self.RejectingCount = ko.observable();
      self.PassedCount = ko.observable();
      self.FailedCount = ko.observable();
      self.PagingInfo = ko.observable();
  
      var getData = function (param) {
          $.ajax({
              url: api("Candidate/GetCandidates"),
              data: param,
              type: 'GET',
              dataType: 'JSON'
          }).done(function (data) {
              ko.mapping.fromJS(data, mappingCandidateList, self);
          });
      }
  }
  
  ko.applyBindings(new CandidateListViewModel (), document.getElementById('candidate-container'));
  </code></pre>
  
  <p>and this is the html</p>
  
  <pre><code>&lt;table&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th&gt;number&lt;/th&gt;
              &lt;th&gt;name&lt;/th&gt;
              &lt;th&gt;status&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
          &lt;tr&gt;
              &lt;td data-bind="text: Candidates()[0].CandidateNumber"&gt;&lt;/td&gt;
              &lt;td data-bind="text: Candidates()[0].Name"&gt;&lt;/td&gt;
              &lt;td data-bind="text: Candidates()[0].Status"&gt;&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>