Knockout为15个项目的数组生成3个部分，每个部分生成5篇文章
Knockout generate for an array of 15 items 3 sections and 5 articles for each section
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>
例如，如果我在数组中有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"
}]
}],
请考虑到我不允许修改这个可观察的结构
第二次编辑
<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 -->
在这种情况下，不能使用if和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。
使用$index()变量沿着这些线做一些事情。参见：knockout.js使用$index和if绑定
使用提供的模型：http://jsfiddle.net/2dRLp/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>
查看小提琴
我希望它能有所帮助。
相关文章：
- 如何使用url加载程序在webpack中导入多个图像
- 多个单选按钮组相互干扰
- 下拉选择可自动更改第二个下拉选择
- onkeyup无法动态创建多个文本区域
- JQuery合并了keyup和focusout两个函数
- 正在验证8个真/假复选框或复选框中的2个
- 借助asp.net验证或java脚本对多个文本进行验证
- 如何使用 node.js 比较两个 json 数组
- 为复选框javascript指定两个值
- Phonegap-(安卓/iphone）多个图像的图像库出现问题
- jQuery自定义验证比较多个输入的序列
- Html页面上的多个Base64图像和平滑加载
- 节点是否需要模块传递带有方括号的arg?这是个错误吗
- 使用javascript检查多个输入值，并在1次检查中标记多个输入框
- KnockoutJS-组件-多个实例
- 用每小时的差值填充数组/列表-从下拉列表中给定两个时间值
- 使用ajax在多个页面上发布一篇文章
- Knockout为15个项目的数组生成3个部分，每个部分生成5篇文章
- 在一个页面上(在一篇博客文章中)编码多个fotorama
- Firebase Storage v3返回“多部分体”，不包含2个或3个部分.在Android 4.2.2和4.3上
