无法在视野内设置淘汰绑定

时间:2019-08-12 14:24:59

标签: javascript data-binding knockout.js

我是新手,想要淘汰出局。我试图在我的视图上的foreach中获得一个文本框,以绑定到一个可观察的数组,但是没有运气。我的foreach没问题,但在其中没有用。

我的视图上有一个简单的文本框,在我的js中有可观察到的匹配项。 此文本框和Observable完美地绑定在一起,并且总是在文本框值更改后立即进行更新。

我也有一个带有foreach的表,在foreach中还有另一个文本框。由于绑定到数组,每次迭代代表表的每一行,因此绑定的方式略有不同。

在foreach内的文本框中,绑定时遇到问题。更新任何这些文本框似乎都不会更新可观察到的数组。

这是我的工作文本框和绑定。

<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>

绑定:

self.Tasks = ko.observableArray([]);

现在console.log(self.Tasks()[0] .Desc());不能反映表格中[0]位置文本框中的内容。我猜这个文本框没有正确绑定到可观察数组,但是不确定为什么。

我希望console.log(self.Tasks()[0] .Desc());来显示我的foreach表格[0]位置文本框中的值。

任何帮助都将不胜感激。 干杯

1 个答案:

答案 0 :(得分:1)

您需要从()中删除data-bind。在textInput绑定处理程序中,敲除检查绑定的表达式是否可观察。由于您拥有Desc(),因此它的值为静态初始值。因此,对输入的任何更新都不会将其更新回视图模型的属性。

(此外,您可以从绑定中删除$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>