title: How can I bind an editable ko.observableArray of observable strings?
body: <p>This is a follow-up to <a href="https://stackoverflow.com/questions/15747211/how-can-i-bind-a-ko-observablearray-of-strings">How can I bind a ko.observableArray of strings?</a></p>
  
  <p>How can I bind an editable observable array of observable strings to a set of input boxes? I don't want to bind to an array of objects, as my underlying JSON sent from the server is an array of strings.</p>
  
  <p>The following example doesn't work (try it at <a href="http://jsfiddle.net/LDNeA/" rel="nofollow noreferrer">http://jsfiddle.net/LDNeA/</a>). Binding an array of objects with observable strings is OK, but binding the array of observable strings directly doesn't work, and the model is not updated.</p>
  
  <p>The important thing is that the entries in the textboxes are mapped back into the model.</p>
  
  <p>JS:</p>
  
  <pre><code>var ViewModel = function() {
      this.value = ko.observable("hi")
      this.array1 = ko.observableArray([ko.observable("hi"), ko.observable("there")]);
      this.array2 = ko.observableArray([{ data: ko.observable("hi") }, { data: ko.observable("there") }]);
  };
  
  ko.applyBindings(new ViewModel());
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class='liveExample'&gt;   
      &lt;p&gt;&lt;input data-bind='value: value' /&gt;&lt;/p&gt; 
      &lt;div data-bind="foreach: array1"&gt;
          &lt;p&gt;&lt;input data-bind='value: $data' /&gt;&lt;/p&gt; 
      &lt;/div&gt;
      &lt;div data-bind="foreach: array2"&gt;
          &lt;p&gt;&lt;input data-bind='value: data' /&gt;&lt;/p&gt; 
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;pre data-bind="text: ko.toJSON($data)"&gt;&lt;/pre&gt;
  </code></pre>