knockout.js - 使用 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'到输入中，因此可观察到的将在按键事件中设置。

见小提琴