Knockout JS - 绑定到可观察的 Ints 数组 [重复]答案

【问题标题】：Knockout JS - Binding to array of observable Ints [duplicate]Knockout JS - 绑定到可观察的 Ints 数组 [重复]
【发布时间】：2013-09-20 19:09:14
【问题描述】：

我正在尝试将一个简单的整数数组绑定到带有输入的无序列表，如下所示：

视图模型

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 中的更改。

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

编辑：这个问题与被标记为重复的问题不同Knockout JS - How to correctly bind an observableArray，这是关于简单类型元素的特殊双向绑定案例 - ints 或 strings。

【问题讨论】：

您是否尝试过使用 ints 的 observableArray 而不是 observable(int) 即：self.amounts.push(i)？我并不积极，但我相信这应该会奏效。
我确实尝试过，但没有运气。还尝试制作整数字符串，但也没有用。
值绑定需要传递一个包装好的 observable。我不确定 $data 究竟是如何工作的，但它可能会提前解开 observable...

标签： javascript knockout.js

【解决方案1】：

看起来这是一个重复的问题，我的预感是正确的。 $data 总是会解包 observables，所以你必须使用名称、值对象对的数组。

看到这个问题：Knockout JS - How to correctly bind an observableArray

【讨论】：

谢谢迈克尔，这很好地解决了问题。

【解决方案2】：

$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);

【讨论】：