javascript - Knockout - How to keep template inputs in sync with observable array when adding? -

i using foreach template knock out.

i have binding in page

 <div data-bind="template: { name:'mylist', foreach: viewmodel.mylist}</div>

in template, have attr binding on input:

 data-bind="attr: { value: $data.desc }"   viewmodel.mylist.push(listitem);

i convert view model json:

 var json = ko.mapping.tojson(viewmodel);

the value in input not bound observable array. if hard code value below doesn't bind.

data-bind="attr: { value: 1 }"

how keep view model observable array in sync input when adding?

more info - update

i populating initial view model using: viewmodel.mylist = ko.mapping.fromjs(model);

model passed javascript using @html.raw(jsonconvert.serializeobject(model), passed mvc controller. contains list of objects called 'mylist'.

i'm not sure else provide (sorry can't provide fiddle @ moment due dependency on db, mvc etc). answer?

solution?

it seems cannot use attr binding value - if move value binding out side this:

data-bind="value: $data.desc, attr: { other attributes here... }

it works. know why?

i think might related how bind value on input i've seen few times, try this:

<input data-bind="value: $data.desc" />

instead of this:

<input data-bind="attr: { value: $data.desc }" />

the correct way bind value not through attribute, think if it's set attribute knockout sets doesn't care if changes afterwards.

Script