녹아웃 15 개 항목의 배열에 대해 생성 3 개 섹션과 각 섹션 5 개 기사

Question

HI 내가 배열을 반복하고이 같은 일부 마크 업을 생성 할 필요가 녹아웃 상황이 : 이제

<section data-bind="foreach: category().questions"> 
     <article> 
      <!-- ko if: hasGrade--> 
       <header data-bind="text: description"></header> 
       <ul> 
        <li><a href="#">1</a></li> 
        <li><a href="#">2</a></li> 
        <li><a href="#">3</a></li> 
        <li><a href="#">4</a></li> 
        <li><a href="#">5</a></li> 
        <li><a href="#">6</a></li> 
        <li><a href="#">7</a></li> 
        <li><a href="#">8</a></li> 
        <li><a href="#">9</a></li> 
        <li><a href="#">10</a></li> 
       </ul> 
      <!-- /ko --> 
      <!-- ko if: hasMemo--> 
       <header data-bind="text: memoTitle"></header> 
       <textarea>safa</textarea> 
      <!-- /ko --> 
     </article> 
</section> 

을 문제는이 유사한 구조를 생성해야한다는 것입니다 :

<section> 
    <article></article> 
    <article></article> 
    <article></article> 
    <article></article> 
    <article></article> 
</section> 
<section> 
    <article></article> 
    <article></article> 
    <article></article> 
    <article></article> 
    <article></article> 
</section> 
<section> 
    <article></article> 
    <article></article> 
    <article></article> 
    <article></article> 
    <article></article> 
</section> 

예를 들어 내가 느릅 나무 3 개 섹션을 생성해야 할 것입니다 배열 (15 개) 질문이 있으면 나는 5 명에 대해 묻는 질문!를 나타내는 기사를 나는 20 개의 아이템을 가질 수있는 예일 뿐이다.

녹아웃으로 어떻게이 작업을 수행 할 수 있습니까?

**Edit** 


categories: [{ 
    categoryId: 1, 
    title: "Docent", 
    hasMemo: true, 
    memoIsMandatory: false, 
    memoTitle: "Docent Opmerkingen", 
    questions: [{ 
     questionId: 11, 
     description: "De docent is goed voorbereid", 
     hasGrade: false, 
     hasMemo: true, 
     showOnlyMemo: true, 
     memoTitle: "De docent is goed voorbereid" 
    }, { 
     questionId: 12, 
     description: "De docent heeft kennis van zaken", 
     hasGrade: true, 
     hasMemo: false, 
     showOnlyMemo: false, 
     memoTitle: "De docent heeft kennis van zaken" 
    }, { 
     questionId: 13, 
     description: "De docent kan de onderwerpen boeiend uitleggen", 
     hasGrade: true, 
     hasMemo: false, 
     showOnlyMemo: false, 
     memoTitle: "De docent kan de onderwerpen boeiend uitleggen" 
    }, { 
     questionId: 14, 
     description: "De docent gaat goed in op de vragen uit de groep", 
     hasGrade: true, 
     hasMemo: false, 
     showOnlyMemo: false, 
     memoTitle: "De docent gaat goed in op de vragen uit de groep" 
    }, { 
     questionId: 15, 
     description: "De docent stimuleert de groep tot actieve deelname", 
     hasGrade: true, 
     hasMemo: false, 
     showOnlyMemo: false, 
     memoTitle: "De docent stimuleert de groep tot actieve deelname" 
    }, { 
     questionId: 16, 
     description: "De docent voegt inhoudelijk iets toe aan het studiemateriaal", 
     hasGrade: true, 
     hasMemo: false, 
     showOnlyMemo: false, 
     memoTitle: "De docent voegt inhoudelijk iets toe aan het studiemateriaal" 
    }, { 
     questionId: 17, 
     description: "De docent is praktijkgericht", 
     hasGrade: true, 
     hasMemo: false, 
     showOnlyMemo: false, 
     memoTitle: "De docent is praktijkgericht" 
    }, { 
     questionId: 18, 
     description: "Totaal oordeel over de docent", 
     hasGrade: true, 
     hasMemo: false, 
     showOnlyMemo: false, 
     memoTitle: "Totaal oordeel over de docent" 
    }] 
}, { 
    categoryId: 7, 
    title: "Opbouw programma en studiemateriaal", 
    hasMemo: true, 
    memoIsMandatory: false, 
    memoTitle: "Opbouw programma en studiemateriaal Opmerkingen", 
    questions: [{ 
     questionId: 54, 
     description: "Het studieprogramma is duidelijk opgebouwd", 
     hasGrade: true, 
     hasMemo: false, 
     showOnlyMemo: false, 
     memoTitle: "Het studieprogramma is duidelijk opgebouwd" 
    }, { 
     questionId: 55, 
     description: "Het studiemateriaal is compleet, goed leesbaar en praktijkgericht", 
     hasGrade: true, 
     hasMemo: false, 
     showOnlyMemo: false, 
     memoTitle: "Het studiemateriaal is compleet, goed leesbaar en praktijkgericht" 
    }] 
}], 

Pls는 내가이 표현을 추가 tryed 한

<div data-bind="foreach: category().questions"> 
    <!-- ko if: ($index % 5) === 0 --> 
    <section > 
    <!-- /ko --> 
     <article> 
      <!-- ko if: hasGrade--> 
      <header data-bind="text: description"></header> 
      <ul> 
       <li><a href="#">1</a></li> 
       <li><a href="#">2</a></li> 
       <li><a href="#">3</a></li> 
       <li><a href="#">4</a></li> 
       <li><a href="#">5</a></li> 
       <li><a href="#">6</a></li> 
       <li><a href="#">7</a></li> 
       <li><a href="#">8</a></li> 
       <li><a href="#">9</a></li> 
       <li><a href="#">10</a></li> 
      </ul> 
      <!-- /ko --> 
      <!-- ko if: hasMemo--> 
      <header data-bind="text: memoTitle"></header> 
      <textarea></textarea> 
      <!-- /ko --> 
     </article> 
    <!-- ko if: ($index % 5) === 0 --> 
    </section> 
    <!-- /ko --> 
</div> 

이 관찰

2 차 편집의 구조를 수정할 수 없습니다입니다 accout 고려 :하지만 어떤 이유로입니다 더 이상 아무것도 표시하지 않습니다. 데이터를 제거하면 데이터가 표시되지만 표시되지 않습니다.이 표현을 올바르게 쓰지 않았 으면 좋겠습니까? 내가 바로 당신을 이해한다면

<!-- ko if: ($index % 5) === 0 --> 

Answer 1

당신은이 경우 if 및 index()을 사용할 수 없습니다. 그룹 다른 하나는 그룹 내부의 질문에 하나 그런

self.groupedQuestions = ko.computed(function(){ 
    var groups = []; 
    var index = 0; 
    var group; 
    ko.utils.arrayForEach(self.category().questions, function(item){ 
     if (index % 5 ===0) 
     { 
      group = []; 
      groups.push(group); 
     } 
     group.push(item); 
     index++; 
    }); 
    return groups; 
}); 

당신이보기에 바인딩이 foreach이 필요합니다 : 당신이 필요로하는 무엇

는 질문의 groupping을 계산 된 속성입니다 :

<div data-bind="foreach: groupedQuestions"> 
    <section> 
     <!-- ko foreach: $data --> 
      <article> 
       <!-- ... --> 
      </article> 
     <!-- /ko --> 
    </section> 
</div> 

데모 JSFiddle.

Answer 2

, 당신은 그렇게 할 수 있습니다 :

<div data-bind="foreach: categories"> 
    <section><span data-bind="text: title"></span> 

     <br/> 
     <!-- ko foreach : questions --> 
     <article> 

      <!-- ko if: hasGrade--> 
       <header data-bind="text: description"></header> 
       <ul> 
        <li><a href="#">1</a></li> 
        <li><a href="#">2</a></li> 
        <li><a href="#">3</a></li> 
        <li><a href="#">4</a></li> 
        <li><a href="#">5</a></li> 
        <li><a href="#">6</a></li> 
        <li><a href="#">7</a></li> 
        <li><a href="#">8</a></li> 
        <li><a href="#">9</a></li> 
        <li><a href="#">10</a></li> 
       </ul> 
      <!-- /ko --> 
      <!-- ko if: hasMemo--> 
       <header data-bind="text: memoTitle"></header> 
       <textarea>safa</textarea> 
      <!-- /ko --> 

     </article> 
     <!-- /ko --> 
    </section> 
</div> 

See fiddle

나는 그것이 도움이되기를 바랍니다.

Answer 3

변수에 따라 $index() 변수를 사용합니다. 참조 : knockout.js using $index with if binding

제공된 모델을 사용 : 그것은 당신이 원하는 것과 일치하지만 다음에 어디로 가야의 아이디어를 줄 수있는 경우 http://jsfiddle.net/2dRLp/2/

확실하지. 그것은 if 블록과 개방 내부 유효한 HTML 마크 업이어야하고 section을 폐쇄하는 것은 그 자체가 유효하지 않기 때문에