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 个问题，我将不得不生成 3 个部分，其中我有 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"
    }]
}],

请注意我不允许修改这个 observable 的结构

第二次编辑

    <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

在这种情况下，您不能使用ifand index()，因为它必须是if块内的有效 HTML 标记，并且打开和关闭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;
});

然后，您的视图中需要两个foreach绑定：一个用于组，一个用于组内的问题：

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

演示JSFiddle。

于 2013-07-26T15:30:29.680 回答
1

沿着这些思路，使用$index()变量。参见：knockout.js 使用 $index 和 if 绑定

使用提供的模型：http: //jsfiddle.net/2dRLp/2/

不确定它是否符合您的要求，但可能会告诉您下一步该去哪里。

于 2013-07-26T14:39:54.727 回答
0

如果我理解正确，您可以这样做：

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

见小提琴

我希望它有所帮助。

于 2013-07-26T14:04:16.957 回答