Widget HTML Content Binding with Gridster and Knockout.js

Question

This is related to another topic posted on Widget binding with Gridster and Knockout

The widget binding is fine however I am trying to bind values within each widget. So consider the following data setup as an observable array

{id: "1", text:'Title', datarow:1, datacol:1, datasizex:1, datasizey:1}

I have the following HTML bindings within each widget

<input data-bind="value: text"/>

<span class="text" data-bind="text: text"></span>

The UI is not updating when a new value is entered. See http://jsfiddle.net/Be4cf/31/

Answer 1

You need to convert the text property into an observable :

{id: "1", text:ko.observable('Widget #1'), datarow:1, datacol:1, datasizex:1, datasizey:1},
{id: "2", text:ko.observable('Widget #2'), datarow:1, datacol:2, datasizex:2, datasizey:1},
{id: "3", text:ko.observable('Widget #3'), datarow:1, datacol:4, datasizex:1, datasizey:1},
{id: "4", text:ko.observable('Widget #4'), datarow:2, datacol:1, datasizex:1, datasizey:2}

You can also add valueUpdate: 'afterkeydown' to the input, so the observable will be set on the key down event.

See fiddle