4

次のように、整数の単純な配列を入力付きの順序付けられていないリストにバインドしようとしています。

ビューモデル

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 - observableArray を正しくバインドする方法、それは単純型要素 ( ints、またはstring )の特別な双方向バインディングのケースに関するものです。

4

2 に答える 2

3

これは重複した質問のようで、私の勘は正しかったです。$data は常にオブザーバブルをアンラップするため、代わりに名前と値のオブジェクトのペアの配列を使用する必要があります。

この質問を参照してください:ノックアウト JS - observableArray を正しくバインドする方法

于 2013-01-08T20:51:34.660 に答える
1

この場合、$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);
于 2013-01-08T20:57:26.897 に答える