1

こんにちは、配列を反復処理して次のようなマークアップを生成する必要があるノックアウトの状況があります。

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

たとえば、配列に 15 の質問がある場合、質問を表す記事に 5 つの質問がある 3 つのセクションを生成する必要があります。

ノックアウトでこれを達成するにはどうすればよいですか?

**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"
    }]
}],

このオブザーバブルの構造を変更することは許可されていないことを考慮してください

2回目の編集

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

この式を追加しようとしましたが、何らかの理由で何も表示されなくなりました.削除するとデータが表示されますが、表示されません。

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

3 に答える 3

2

ifこの場合、 andはブロックindex()内の有効な HTML マークアップである必要がifあり、開始と終了section自体は有効ではないため、使用できません。

必要なのは、質問のグループ化を行う計算されたプロパティです。

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

次に、ビューに 2 つのバインディングが必要です。1foreachつはグループ用、もう 1 つはグループ内の質問用です。

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

JSFiddle のデモ。

于 2013-07-26T15:30:29.680 に答える
1

$index()変数を使用して、これらの線に沿った何か。参照: if バインディングで $index を使用する knockout.js

提供されたモデルの使用: http://jsfiddle.net/2dRLp/2/

それがあなたが望むものと一致するかどうかはわかりませんが、次にどこに行くべきかについてのアイデアを与えるかもしれません.

于 2013-07-26T14:39:54.727 に答える