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

【问题标题】：Widget HTML Content Binding with Gridster and Knockout.js使用 Gridster 和 Knockout.js 绑定小部件 HTML 内容
【发布时间】：2013-12-22 00:40:37
【问题描述】：

这与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/

【问题讨论】：

标签： knockout.js gridster

【解决方案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

【讨论】：