使用Gridster和Knockout.js进行小部件HTML内容绑定

Question

这与Widget binding with Gridster and Knockout

上发布的另一主题相关

小部件绑定很好，但我试图绑定每个小部件中的值。因此，请将以下数据设置视为可观察数组

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

我在每个小部件中都有以下HTML绑定

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

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

输入新值时，UI不会更新。见http://jsfiddle.net/Be4cf/31/

Answer 1

您需要将text属性转换为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}

您还可以将valueUpdate: 'afterkeydown'添加到输入中，因此可以在按键事件中设置observable。

See fiddle