Question

我有一个针对淘汰的情况，每个绑定都有自定义

这是我的代码：

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

型号：

    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中循环两次数据然后递增它。

预期输出：

| FieldName1 | FieldValue2 || FieldName3 | FieldValue4 |

| FieldName5 | FieldValue6 || FieldName7 | FieldValue8 |

Answer 1

你可以创建一个计算对象项，如下所示：

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 observable设置的项目数（其中一些属性可能包含空引用，如果总项目数不能被每行计数的项目整除。

我已经在此编写了一个示例，您可以在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/找到）稍好一些，因为它不会为每一行使用columns计算一次。

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

Knockout绑定与每个定制

型号：

| FieldName1 | FieldValue2 || FieldName3 | FieldValue4 |

| FieldName5 | FieldValue6 || FieldName7 | FieldValue8 |

1 个答案: