Knockoutjs 체크 박스 변경된 이벤트

Question

내 모델의 배열에 몇 개의 체크 박스가 바인딩되어 있습니다. 이것은 잘 작동하는데, 상자를 체크하면 그에 따라 배열이 업데이트됩니다.

그러나 값이 변경되면 내 모델의 메소드를 호출하여 새 값이 주어진 결과를 필터링하고 싶습니다. 변경 이벤트를 연결하려고 시도했지만 변경 전보다 값이 변경된 것 같습니다.

이 문제를 더 자세히 설명 할 수있는 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을 귀하의 바이올린 당신이 당신의 data-bind -s에 쉼표를 놓치고에서

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

Answer 1

변경 이벤트가 필요하지 않습니다. 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); 
    }); 
} 

Answer 2

가 여기에 고정 예제 : 문제가 다시 http://jsfiddle.net/4aau4/1/

- 그것은 수도 KnockoutJS 관련 문제 (즉, change 이벤트가 발생한 후 observableArray를 업데이트 함)이거나 내가 쓴 것과 비슷한 것 이처럼 보이는 - http://jsfiddle.net/4aau4/2/ : Checkboxes are being checked before click handler is even called이

편집이 :

어떤 힘든 일요일, 나는 여전히

이 조각에서보세요 :) 깨어 아니에요 생각 전에 약간의 시간에 자리 잡고 DOM이 올바르게 업데이트되었으며 그 뒤가 뒤처진 ko.observableArray입니다. ($('input:checked').length은 실제로 얼마나 많은 체크 박스가 선택되었는지를 말합니다).