淘汰赛 - 循环遍历数组并跟踪计数？

Question

我有一个这样的淘汰对象，

this.results = [ 
    { name: 'aaa', display: true },
    { name: 'bbb', display: false },
    { name: 'ccc', display: true},
    { name: 'ddd', display: true},
    { name: 'eee', display: true}
];

我必须以这种表格格式填充数据，每行有两个单元格。

只有当“display”属性为真时才应该显示“name”。由于 $index 在这种情况下不起作用，我该如何完成呢？

<table>
    <tr>
        <td>aaa</td>
        <td>ccc</td>
    </tr>
    <tr>
        <td>ddd</td>
        <td>eee</td>
    </tr>
</table>

谢谢。

Answer 1

您应该将结果配对并绑定到结果的配对视图。

如果不使用第三方库进行此配对，您需要执行以下操作：

this.pairedResults = ko.dependentObservable(function () {
    var pairedResults = [], currentResult;
    ko.utils.arrayForEach(this.results(), function (result) {
        if (result.display()) {
            if (!currentResult) {
                currentResult = {
                    results: [ result ]
                };
            } else {
                currentResult.results.push(result);
                pairedResults.push(currentResult);
                currentResult = null;
            }
        }
    });
    if (currentResult) {
        pairedResults.push(currentResult);
    }
    return pairedResults;
}, this);

然后绑定到你的视图：

<table>
    <tbody data-bind="foreach: pairedResults">
        <tr data-bind="foreach: results">
            <td data-bind="text: name"></td>
        </tr>
    </tbody>
</table>

fiddle

Answer 2

您的表格与您的模型不匹配。我将 name2 添加到额外列的模型中。

在这种情况下，您不需要引用索引。你要做的是在行上使用 if 绑定。

<table>
    <thead>
        <tr>
            <th>Name1<th>
            <th>Name2</th>
        <tr>
    </thead>
    <tbody data-bind="foreach: results">
        <tr data-bind="if: display">
            <td data-bind="text: name"><td>
            <td data-bind="text: name2"><td>
        <tr>
    </tbody>
</table>

http://jsfiddle.net/dW7ap/1/