변경 행 녹아웃 템플릿마다 8 행

Question

나는 아래 표와 같이 바인딩하고 바인딩 녹아웃 템플릿을 사용하여 :

<script type="text/x-jquery-tmpl" id="PrintLabelsTemplate"> 
    <TR> 
     <TD data-bind="text: CustomerFirstName"></TD> 
     <TD data-bind="text: ModelDescription"></TD> 
    </TR> 
</script> 

<div> 
    <table style="border-collapse: collapse;" cellpadding="0" cellspacing="0" align="center" width="100%" id="tblPrintLabels" class="pme-main" data-bind="template: {name:'PrintLabelsTemplate', foreach: ViewModel}"> 
    </table> 
</div> 

모든 나를 위해 잘 작동하지만, 내 문제는 모든 8 행은 내가 다른 행을 삽입 할 반복 이후 하나의 이미지 배경처럼

<tr> 
    <td>Breaking Row</td> 
</tr> 

그럼 어떻게이 논리를 템플릿 바인딩에 쓸 수 있습니까?

미리 감사드립니다.

Answer 1

내가 할 것은 CSS를 사용하는 것입니다. CSS 속성 :nth-child(7)을 사용하여 일곱 번째 항목에 대해 다른 CSS 속성을 지정할 수 있습니다. 그런 다음 :after 선택자를 content CSS 속성과 함께 사용하여 배경을 원하는대로 추가 행을 삽입합니다.

이것은 넉 아웃 코드가 비정상적으로 처리하지 않는 장점이 있으며, 매 8 행마다 반복되는 시각적 구분 기호 인 경우 코드에서 프레젠테이션을 분리합니다. 여기

는 nth-child 및 css content