jquery - knockout 绑定(bind)，每个自定义

Question

我这里有一个情况是用定制的每个绑定(bind)进行 knockout

这是我的代码:

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

};

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

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

预期输出:

---

| FieldName1 |FieldValue2 || FieldName3 |FieldValue4 |

|字段名5 |字段值6 || 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;
});

然后您将绑定(bind)到 rows 属性，而不是直接绑定(bind)到 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/ 上找到它，但我不建议按照该示例中的方式绑定(bind)表。我不确定它将如何设置订阅，但它可能会多次订阅计算出的 columns，每一行订阅一次。它只是用来显示计算的行的示例，不用于任何其他目的。

如果你想让每一行本身就是一个数组，你可以用下面的代码来实现:

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;
});

此版本的绑定(bind)(您可以在 http://jsfiddle.net/af7P2/1/ 找到)要好一些，因为它不使用为每一行计算一次的列。

一般来说，此解决方案的性能可能不会很好，具体取决于您的情况。向 resultData 数组添加/删除元素，或更改 itemsOnEachRow 值，都会重新绑定(bind)整个表。对您来说可能不是问题，只是需要注意的事项。