Note that there are some explanatory texts on larger screens.

plurals
  1. POHow can I bind an editable ko.observableArray of observable strings?
    primarykey
    data
    text
    <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>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload