淘汰赛绑定，每个都可进行自定义

我这里有一个情况，用于淘汰每个带有定制的绑定

这是我的代码：

<div id="content-wrapper">

    <div id="akjsdbgb">
        <table>
            <tbody data-bind="foreach: resultData">
                <tr>
                    <td data-bind="text: fieldName"></td>
                    <td data-bind="text: fieldValue"></td>
                </tr>               
            </tbody>
        </table>
    </div>

</div>

Model:

    self.resultData = ko.observableArray([]);

    self.getResultData = function () {
        var data = Cobalt.Data.getResultData();
        self.resultData(data.searchDataList);
    };
};

Models.Field = function(data) {

    var self = this;
    self.fieldName = data.fieldName;
    self.fieldValue = data.fieldValue;

};

问题是我需要从 resultData 创建一个表格数据，该数据采用 fieldName 和 fieldValue 格式，并且该表应该在单个 tr 中包含两组数据

4 在 tr 中，但数据数组包含单个 fieldName 和 fieldValue；所以我们需要在 tr 中循环两次数据，然后递增它。

预期输出：

|字段名称1 |字段值2 ||字段名称3 |字段值4 |

|字段名称5 |字段值6 ||字段名称7 |字段值8 |

您可以创建一个计算来配对项目，如下所示：

self.rows = ko.computed(function(){
    var allItems = self.resultData();
    var rows = [];
    for(var i = 0, len = allItems.length; i < len; i = i+2){
        rows.push({
            leftItem: allItems[i],
            rightItem: i + 1 < len ? allItems[i + 1] : null
        });
    }
    return rows;
});

然后您将绑定到rows属性而不是直接绑定到resultData财产。

编辑：@GOK 在评论中要求提供一个允许在单行中自定义项目数量的版本。

您可以通过执行以下操作轻松实现此目的：

self.itemsOnEachRow = ko.observable(2);
self.rows = ko.computed(function(){
    var allItems = self.resultData();
    var itemsPerRow = self.itemsOnEachRow();
    var rows = [];
    for(var i = 0, len = allItems.length; i < len; i = i + itemsPerRow){
        var row = {};
        for(var itemIndex = 0; itemIndex < itemsPerRow; itemIndex++){
            var item = null;
            if (i + itemIndex < len){
                item = allItems[i + itemIndex];
            }
            row['item' + itemIndex] = item;
        }
        rows.push(row);
    }
    return rows;
});

每行都会有名为的属性item1, item2等，以设置的项目数itemsOnEachRow可观察（如果总项目数不能被每行项目数整除，其中一些属性可能包含空引用）。

我已经写了一个关于此的示例，您可以在http://jsfiddle.net/af7P2/ http://jsfiddle.net/af7P2/，但我不建议按照该示例中的方式绑定表。我不确定它将如何设置订阅，但它可能会多次订阅columns每行计算一次。它只是为了显示一个示例rows计算出来的，不为别的。

如果您希望每一行本身都是一个数组，可以使用以下代码来实现：

self.itemsOnEachRow = ko.observable(2);
self.rows = ko.computed(function(){
    var allItems = self.resultData();
    var itemsPerRow = self.itemsOnEachRow();
    var rows = [];
    for(var i = 0, len = allItems.length; i < len; i = i + itemsPerRow){
        var row = [];
        for(var itemIndex = 0; itemIndex < itemsPerRow; itemIndex++){
            var item = null;
            if (i + itemIndex < len){
                item = allItems[i + itemIndex];
            }
            row.push(item);
        }
        rows.push(row);
    }
    return rows;
});

此版本的绑定（您可以在http://jsfiddle.net/af7P2/1/ http://jsfiddle.net/af7P2/1/）好一点，因为它不使用columns为每一行计算一次。

一般来说，根据您的具体情况，此解决方案可能表现不佳。任何项目的添加/删除resultData数组，或更改itemsOnEachRow值，将重新绑定整个表。对您来说可能不是问题，只是需要注意的事情。