6

モデルの配列にバインドされたチェックボックスがいくつかあります。ボックスをチェックすると、それに応じて配列が更新されます。

ただし、値が変更された場合、モデルでメソッドを呼び出して、新しい値が与えられた結果をフィルタリングしたいと考えています。変更イベントを接続しようとしましたが、これは変更後ではなく変更前の値を持っているようです。

私の問題を jsfiddle http://jsfiddle.net/LpKSe/で説明しましたが、これはより理にかなっています。

完全を期すために、ここで私のコードを繰り返します。

JS

function SizeModel() {
    var self = this;
    self.sizes = ko.observableArray(["small", "medium", "large"]);
    self.sizes2 = ko.observableArray(["small", "medium", "large"]);
    self.getResults = function(e) {
        alert(self.sizes());
    };
    self.getResults2 = function(e) {
        alert(self.sizes2());
    };
}

$(document).ready(function() {
    sizeModel = new SizeModel();

    ko.applyBindings(sizeModel);
});​

HTML

<h3>Size
  <input type="checkbox" value="small"  data-bind=" checked: sizes, event:{change: getResults}"/>
  <span class='headertext'>Small</span>
  <input type="checkbox"  value="medium" data-bind=" checked: sizes, event:{change: getResults}"   />
  <span class='headertext'>Medium</span>
  <input type="checkbox"  value="large" data-bind=" checked: sizes, event:{change: getResults}"  />
  <span class='headertext'>Large</span>
</h3>
<h3>Size
 <input type="checkbox" value="small"  data-bind=" checked: sizes2, event:{click: getResults2}"/>
 <span class='headertext'>Small</span>
 <input type="checkbox"  value="medium" data-bind=" checked: sizes2, event:{click: getResults2}"   />
 <span class='headertext'>Medium</span>
 <input type="checkbox"  value="large" data-bind=" checked: sizes2, event:{click: getResults2}"  />
 <span class='headertext'>Large</span>
</h3>
4

2 に答える 2

14

change イベントは必要ありません。observableArray を購読すると、変更時に通知され、更新された配列が渡されます: http://jsfiddle.net/jearles/LpKSe/53/

function SizeModel() {
    var self = this;
    self.sizes = ko.observableArray(["3", "2", "1"]);
    self.sizes.subscribe(function(updated) {
        alert(updated);
    });
}
于 2012-06-24T12:58:29.413 に答える
0

あなたのフィドルでは、data-bind-s にカンマがありません。修正された例を次に示します: http://jsfiddle.net/4aau4/1/

問題について - それは KnockoutJS 関連の問題 (つまり、changeイベントが発生した後に observableArray を更新する)、または私がしばらく前に立ち往生したものと同様の問題である可能性があります:クリック ハンドラが呼び出される前にチェックボックスがチェックされている

編集：

なんてタフな日曜日、私はまだ起きていないと思います :)

このスニペットを見てみましょう: http://jsfiddle.net/4aau4/2/ - DOM が適切に更新されているように見えますがko.observableArray、遅れています。（$('input:checked').length実際にチェックされているチェックボックスの数を示します）。

于 2012-06-24T12:54:36.110 に答える