Knockout绑定与每个定制

我有一个关于每个绑定定制的淘汰赛的情况

这是我的代码：

模型：

  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/找到）稍微好一点，因为它不使用每行计算一次的列。

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