ko.observablearray를 테이블에 바인딩합니다. 배열의 각 객체 ('그룹'이라고 함)는 테이블에 바인딩됩니다. 각 그룹은 또 다른 (non-knockout) 코드 배열을 보유합니다. 각 코드는 한 행에 바인딩됩니다. 각 코드에는 체크 박스에 바인딩 된 부울이 있습니다.ko.observablearray가 변경 될 때 테이블이 업데이트되지 않습니다.
그룹에서 부울 중 하나도 true가 아닌 경우 해당 그룹의 모든 확인란을 활성화해야합니다. 그룹에서 적어도 하나의 부울이 참이면 그 그룹에 대한 잘못된 체크 박스를 비활성화하고 실제 체크 박스를 활성화합니다. 페이지가로드되면 예상대로 작동합니다. 그러나 확인란을 선택하거나 선택 취소하면 상자의 활성화/비활성화 상태가 변경되지 않습니다. 디버거와 함께 살펴보면 observablearray가 업데이트되고 있지만 테이블의 데이터는 업데이트되지 않습니다.
페이지 :
<table data-bind="foreach: {data: Groups}">
<thead>
<tr>
<th colspan="3" data-bind="text: GroupName"></th>
</tr>
</thead>
<tbody data-bind="foreach: {data: Codes}">
<tr>
<td data-bind="text: CodeId"></td>
<td data-bind="text: Desc"></td>
<td>
<input type="checkbox" data-bind="checked: Prime, disable: $root.HasPrime($parent) && !Prime" />
</td>
</tr>
</tbody>
</table>
그룹의 진정한 가치가 있는지 테스트
자바 스크립트 기능 :
var HasPrime = function (gr) {
for (var i = 0; i < gr.Codes.length; i++) {
if (gr.Codes[i].Prime === true) {
return true;
}
}
return false;
};
바이올린 : http://jsfiddle.net/NSLPu/2/
observablearrays가 단방향 바인딩으로 만 작동하는 부분을 놓쳐 야합니다. 감사! – ATayloe
* 배열 자체 *는 양방향입니다. 항목을 추가하거나 제거하면 UI가 자동으로 업데이트됩니다. 배열의 * 항목 *은 또 다른 문제입니다. – Jeroen