녹아웃 JS에서 다차원 배열을 처리하는 가장 좋은 방법은 무엇입니까?

Question

녹아웃으로 다차원 배열을 처리하는 표준 방법은 무엇입니까?

KnockoutJS로 동적 테이블을 생성한다고 가정 해 봅시다. 테이블 행과 열은 observableArrays에서 생성됩니다. 각 셀 내부의 데이터도 관찰 가능 데이터입니다 (텍스트 상자에 바인딩 된 데이터). 각 셀 내부의 데이터도 녹아웃 유효성 검사를 통해 유효성을 검사해야합니다. 내 텍스트 상자의 값을 생성하기 위해 그런 일을 사용하고

:

data-bind="value: $root.qty[$index()][$parentContext.$index()]" 

이것은 TBODY 두 foreach는 내부에 : 그것은 잘 작동

<tbody data-bind="foreach: $root.styleColors"> 
    <tr> 
     <td data-bind="text: StyleColorName, visible: $root.showFirstColumn"></td> 
     <!-- ko foreach: $root.sizes --> 
      <td> 
       <input type="text" class="qty" data-bind="value: $root.qty[$index()][$parentContext.$index()]"/> 
      </td> 
     <!-- /ko --> 
    </tr> 
</tbody> 

,하지만 난해야 내가 편집중인 항목에 따라 데이터를 동적으로 변경할 수 있습니다. 열이나 행의 수를 변경하자마자 모든 문제가 발생합니다. 렌더링 전에 행과 열의 렌더링 대기 상태를 유지함으로써 ext39를 사용하여 많은 문제를 줄였습니다.

현재 편집 된 항목을 변경할 때마다 간단한 자바 스크립트 배열을 사용하여 qty [] [] 다차원 배열을 다시 생성하며 각 실제 값은 관찰 가능합니다.

다음은 내가 가진 tipical 문제의 예입니다. 이 특정 예제의 경우, 수량 값 (셀)의 최대 값과 최소값의 유효성을 검사합니다. 하지만 다음과 같은 예외가 발생합니다 (Uncaught TypeError : 정의되지 않은 속성 '규칙'을 읽을 수 없습니다.) 적은 행이나 적은 수의 열을 포함하는 테이블을 다시 바인딩 할 때. 나는 행과 열에 대한 observableArrays를 변경하고 있는데, 하나의 인덱스가 부족하기 때문에 바인딩 데이터 바인딩 = "$ root.qty [$ index()] [$ parentContext. $ index()]"가 더 이상 유효하지 않습니다. 경계.

무엇이 누락 되었습니까?

감사합니다.

Answer 1

더 많은 viewmodel 코드를 보지 않고도 질문에 대답 할 수는 없지만 길은 복잡해 보입니다. - 녹아웃이 추가/제거를 평가하는 순서를 제어하는 ​​방법을 이해할 수 없다면 인덱싱 문제가 발생할 것입니다. 내가 어떻게 테이블 문제를 해결했는지 말해 줄께.

또한 - 특히 8 아래쪽은 자바 스크립트 코드 수정 테이블에 매우 까다로운 내용입니다. 테스트 테스트!

나는 기본적으로 sandersons 간단한 그리드를 수정했다. 나는 이것을 체크하여 그것이 당신을 위해 일하는지를 볼 것이다. 대신 다차원 배열을하는

https://github.com/SteveSanderson/knockout/tree/gh-pages/examples/resources

, 당신의 열이 다음 행에 대한 또 다른 배열 한 배열이있다. 행 배열의 각 항목은 실제로 키와 다른 열 이름을 가진 객체이고 객체는 값입니다.

그래서 ....

//two columns 
this.columns = ko.observableArray(["Column1","Column2"]); 

//two Rows 
this.rowData = ko.observableArray([ 
{Column1:{StyleColorName:"Top Left"},Column2:{StyleColorName:"Top Right"}}, 
{Column1:{StyleColorName:"Bottom Left"},Column2:{StyleColorName:"Bottom Right"}} 
]); 

Aaannd 마크 업

<thead> 
    <tr> 
     <th data-bind="visible:showFirstColumn">First Column</th> 
     <!-- ko foreach: $root.sizes --> 
     <th data-bind="text:$data" ></th> 
     <!-- /ko --> 
    </tr> 
</thead> 
<tbody data-bind="foreach: rowData"> 
    <tr> 
     <td data-bind="text: StyleColorName, visible: $root.showFirstColumn"></td> 
     <!-- ko foreach: columns --> 
      <td> 
       <input type="text" class="qty" data-bind="value:$parent[$data].StyleColorName()"/> 
      </td> 
     <!-- /ko --> 
    </tr> 
</tbody>