2013-08-13 2 views
2

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/

답변

2

당신이 두 방법을 결합합니다 ' 물건을 만들 필요가 있습니다 관찰 가능. 이 코드의 나머지 일부 해당 변경이 필요합니다

var code1 = { 
    'CodeId': 123, 
     'Desc': 'Code 1', 
     'Prime': ko.observable(false) // <---- changed! 
}; 

: 귀하의 경우, Prime 속성은 관찰 가능한해야

  • 일반 JS 호출을 얻을 수있는 방법으로 Prime를 호출해야 현재 값 "물건을 할"
  • 바인딩 (부정과 같은 입력에로)도 ​​값이
을 부정 얻을 수있는 관찰을 호출해야합니다

업데이트는 this fiddle을 참조하십시오.

+0

observablearrays가 단방향 바인딩으로 만 작동하는 부분을 놓쳐 야합니다. 감사! – ATayloe

+0

* 배열 자체 *는 양방향입니다. 항목을 추가하거나 제거하면 UI가 자동으로 업데이트됩니다. 배열의 * 항목 *은 또 다른 문제입니다. – Jeroen

관련 문제