Knockout JS -绑定到可观察的int数组

Knockout JS - Binding to array of observable Ints

本文关键字：观察 int 数组 JS 绑定 Knockout      更新时间：2023-09-26

我试图将一个简单的整数数组绑定到一个具有输入的无序列表，如下所示:

视图模型

self.amounts = ko.observableArray();
for (var i=0; i<5; i++){
    self.amounts.push(ko.observable(i));
}
HTML 

<ul data-bind="foreach: amounts">
    <li><input type="text" data-bind="value: $data"/></li>
</ul>

这将生成一个列表，其中输入正确地填充了数字0-4。但是，当我更改任何输入的值时，ViewModel不会获得新值。

如果我使用一个简单对象数组作为observableArray，如下所示:

[{amt: 0}, {amt: 1}, {amt: 2}]

并调整HTML以将输入绑定到"amt"属性，然后更改输入中的值确实会触发ViewModel中的更改。

是否有可能使用简单值的数组并实现双向绑定，而不使用更改原始数据模型的解决方案?如果是这样，我做错了什么?

edit:这个问题不同于它被标记为重复的Knockout JS -如何正确绑定一个observableArray，它是关于简单类型元素——int 或字符串的特殊双向绑定情况。

看起来这是一个重复的问题，我的预感是正确的。$data总是会打开可观察对象，所以你必须使用一个名称、值对象对数组来代替。

Knockout JS -如何正确绑定observableArray

$data在这种情况下不起作用。相反，您可以像这样创建一个对象数组:

<ul data-bind="foreach: amounts">
  <li>
    <input type="text" data-bind="value: value" />
  </li>
</ul>
<button data-bind="click: checkValues">Check</button>

。. 

var MyNumber = function (name, value) {
  this.name = ko.observable(name);
  this.value = ko.observable(value);
};
var VM = function () {
  this.amounts = ko.observableArray();
  this.checkValues = function () {
    for (var i = 0; i < 5; i++) {
      console.log('amount = ' + vm.amounts()[i].value());
    }
  };
};
var vm = new VM();
vm.amounts().push(new MyNumber('a', 1));
vm.amounts().push(new MyNumber('b', 2));
vm.amounts().push(new MyNumber('c', 3));
vm.amounts().push(new MyNumber('d', 4));
vm.amounts().push(new MyNumber('e', 5));
ko.applyBindings(vm);
相关文章：