Search code examples
knockout.jsgridster

Widget HTML Content Binding with Gridster and Knockout.js

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/

Solution

  • 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