我是 knockout 新手,正在尝试解决一些问题。我试图在我的 View 中将 foreach 中的文本框绑定(bind)到可观察数组,但没有运气。我的 foreach 没有问题,但在 foreach 内不起作用。
我的 View 上有一个简单的文本框,并且在我的 js 中具有匹配的可观察值。 该文本框和可观察对象完美绑定(bind),并且一旦文本框值发生变化,总是会更新。
我还有一个带有 foreach 的表格,并且在 foreach 中还有另一个文本框。它的绑定(bind)方式略有不同,因为它绑定(bind)到一个数组,其中每次迭代代表表的每一行。
在 foreach 内的文本框中,我在绑定(bind)时遇到问题。更新任何这些文本框似乎都不会更新可观察数组。
这是我的工作文本框和绑定(bind)。
<input data-bind="value: testText" />
self.testText = ko.observable("aaa");
有了上面的内容,console.log(self.testText());始终显示文本框中的内容
这是我在 foreach 中不起作用的文本框
<tbody data-bind="foreach: Tasks">
<tr class="taskItem">
<td><input type="text" data-bind="textInput: $data.Desc()" /></td>
</tr>
</tbody>
绑定(bind):
self.Tasks = ko.observableArray([]);
现在console.log(self.Tasks()[0].Desc());不反射(reflect)表格上 [0] 位置的文本框中的内容。我猜这个文本框没有正确绑定(bind)到可观察数组,但不确定为什么。
我希望console.log(self.Tasks()[0].Desc());显示 foreach 表上位置 [0] 的文本框中的值。
非常感谢任何帮助。 干杯
最佳答案
您需要从data-bind
中删除()
。在 textInput
绑定(bind)处理程序中,knockout 检查表达式绑定(bind)是否是可观察的。由于您有 Desc() ,因此它的计算结果为静态初始值。因此,对输入的任何更新都不会将其更新回 View 模型的属性。
(此外,您可以从绑定(bind)中删除 $data
)
function Task() {
this.Desc = ko.observable();
this.Desc.subscribe(console.log);
}
function viewModel() {
this.Tasks = ko.observableArray([new Task]);
}
ko.applyBindings(new viewModel)
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<table>
<tbody data-bind="foreach: Tasks">
<tr class="taskItem">
<td><input type="text" data-bind="textInput: Desc" /></td>
</tr>
</tbody>
</table>
关于javascript - 无法在 View 中的 foreach 内设置 knockout 绑定(bind),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57463044/