테이블 안에서 바인딩하는 경우 knockout 사용

Question

테이블 내부에서 바인딩을 사용하려고했는데 세 번째 열은 첫 번째 열의 항목이 표시 될 때 텍스트를 표시하지 않습니다. 인덱스가 각각 짝수 또는 홀수 일 때

<table id="searchPanelForm" cellspacing="0" cellpadding="0" align="center" class="conttable" width="100%" border="0" data-bind=""> 
    <tbody> 
     <!-- ko foreach: searchPanelArray --> 
      <!-- ko if: $parent.isSearchEven($data.id) --> 
       <tr> 
        <td class="col2" data-bind="text: $data.label"></td> 
        <td class="col3"><input type="text"></td> 
      <!-- /ko --> 
      <!-- ko if: !$parent.isSearchEven($data.id) --> 
        <td class="col2" data-bind="text: $data.label"></td> 
        <td class="col3"><input type="text"></td> 
       </tr> 
      <!-- /ko --> 
     <!-- /ko --> 
    </tbody> 
</table> 

searchPanelArray

는 아약스 호출 및 참 또는 거짓 isSearchEven 반환을 통해 채워집니다.

Answer 1

if 바인딩을 사용하면 열은 DOM에 전혀 렌더링되지 않습니다. 또한,

<table id="searchPanelForm" cellspacing="0" cellpadding="0" align="center" 
    class="conttable" width="100%" border="0"> 
    <tbody> 
    <!-- ko foreach: searchPanelArray --> 
    <tr> 

     <td class="col1" data-bind="text: $parent.isSearchEven($data.id) ? $data.label : ''"></td> 
     <td class="col2"> 
     <input type="text"> 
     </td> 

     <td class="col3" data-bind="text: !$parent.isSearchEven($data.id) ? $data.label : ''"></td> 
     <td class="col4"> 
     <input type="text"> 
     </td> 
    </tr> 
    <!-- /ko --> 
    </tbody> 
</table> 

if에 대한 containerless control flow syntax는 tr 외부 열고 내부에 폐쇄되었다 바인딩 : 당신이 id에 따라 서로 다른 위치에서 그들을 표시하는 동안 4 열을 표시하려는 경우, 당신은 그것을 변경해야 다음 2 열에 대해서는 그 반대입니다.

여기는 fiddle입니다.

Answer 2

녹아웃은 "컨테이너없는 제어 흐름 구문"이 요소처럼 동작 할 것으로 기대합니다. 요소 외부에서 시작하여 요소 내부에서 끝낼 수 없습니다. Knockout의 관점에서 볼 때 <tr> 내부의 주석은 단순히 형식이 잘못되어 무시됩니다. 이것이 녹아웃과 같습니다 :

<!-- ko foreach: searchPanelArray --> 
    <!-- ko if: $parent.isSearchEven($data.id) --> 
     <tr> 
      <td class="col2" data-bind="text: $data.label"></td> 
      <td class="col3"><input type="text"></td> 
      <td class="col2" data-bind="text: $data.label"></td> 
      <td class="col3"><input type="text"></td> 
     </tr> 
    <!-- /ko --> 
<!-- /ko --> 

논리적으로, 배열의 두 항목을 모두 그룹화하려고합니다. 계산 된 observable을 생성해야합니다. 두 항목이 함께 그룹화 된 새로운 배열을 반환합니다.

this.searchPanelArrayGrouped = ko.pureComputed(function() { 
    var result = [], source = this.searchPanelArray(); 
    for (var i = 0; i < source.length; i += 2) { 
     if (i + 1 >= source.length) { 
      result.push({left: source[i], right: {}}); 
     } else { 
      result.push({left: source[i], right: source[i+1]}); 
     } 
    } 
    return result; 
}, this); 

HTML : 여기

<!-- ko foreach: searchPanelArrayGrouped --> 
    <tr> 
     <td class="col2" data-bind="text: $data.left.label"></td> 
     <td class="col3"><input type="text"></td> 
     <td class="col2" data-bind="text: $data.right.label"></td> 
     <td class="col3"><input type="text"></td> 
    </tr> 
<!-- /ko --> 

https://jsfiddle.net/bg75xvxc/

는 관련 대답은 : https://stackoverflow.com/a/10577599/1287183