Knockout generate for an array of 15 items 3 secti

Question

HI I have a situation with knockout where I need to iterate over an array and generate some markup like this:

<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>

Now the problem is that I have to generate a structure similar to this:

<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>

If for example I have 15 questions in the array I would have to generate 3 sections in wich I have 5 questions an article representing a question.This is just an example I could also have 20 items or so on.

How can I achieve this with knockout?

**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 take into accout that I am not allowed to modify the structure of this observable

2nd Edit

    <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>

I have tryed adding this expression : but for some reason it's not displaying anything anymore.If I remove it I get data but it's not displayed hwo I want it am I not writing this expression right?

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

Answer 1

Something along these lines, using the $index() variable. See: knockout.js using $index with if binding

Using the provided model: http://jsfiddle.net/2dRLp/2/

Not sure if it matches what you want but may give an idea of where to go next.

Answer 2

You cannot use the if and index() in this case because it has to be a valid HTML markup inside the if block and the opening and closing section is not valid in itself.

What you need is a computed property where you do the groupping of your questions:

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;
});

Then you need two foreach binding in your view: one for the groups and one for the questions inside the groups:

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

Demo JSFiddle.

Answer 3

If I understand you right, you could do that :

<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

I hope it helps.