Knockout binding is not updated using an array of simple observables

Question

I have a list of strings in my model. To edit them, I want each of them to appear as <li> with a text box and <button> to delete the item. So, for the list ['A', 'B'] I want something like this:

 <ul data-bind="foreach: titles"> <li> <input value="A" data-bind="value:$data" /> <button data-bind="click: $root.remove">remove</button> </li> <li> <input value="B" data-bind="value:$data" /> <button data-bind="click: $root.remove">remove</button> </li> </ul> <button data-bind="click: add">add</button> 

I can create this initially, but I do not receive an update of the values ​​that will be displayed in the view model, and I cannot get the delete buttons to work.

At first I had an observableArray simple strings, and then updated to the observableArray observable string. Using simple lines, the delete button worked, but it did not predictably update the view model.

I installed a JS script with a rather isolated problem: http://jsfiddle.net/bdukes/uvyH3/2/

If there is an established or better way to do this, I would like to know.

Also, as an unrelated (and less important) problem, the stringifyJson utility always seems to give me empty results for each element of the array.

Answer 1

Knockout does not currently work with an array of pure observables (the problem is registered here ).

To make this work right, you need your objects, which must be objects that store observables, for example:

 { val: ko.observable("something") } 

Here is your fiddle updated to use these types of objects: http://jsfiddle.net/rniemeyer/GgFa9/