淘汰赛可生成15个项目的数组3个部分，每个部分5个文章 [英] Knockout generate for an array of 15 items 3 sections and 5 articles for each section
问题描述
我遇到了淘汰赛的情况，我需要遍历数组并生成如下标记:
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>
例如，如果我在数组中有15个问题，则必须生成3个部分，而我有5个问题的文章代表一个问题，这只是一个示例，我也可以有20个左右.
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
第二次编辑
<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 -->
推荐答案
在这种情况下，您不能使用if和index()，因为它必须是if块内的有效HTML标记，并且必须关闭section本身无效.
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;
});
然后，在视图中需要两个foreach绑定:一个用于组，一个用于组内的问题:
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>
演示 JSFiddle.
这篇关于淘汰赛可生成15个项目的数组3个部分，每个部分5个文章的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
