淘汰赛绑定，为每个人定制 [英] Knockout binding with a customization in for each
问题描述
我在这里有一个淘汰赛的情况，每个绑定都带有自定义
这是我的代码:
<div id="akjsdbgb"><表格><tbody data-bind="foreach: resultData"><tr><td data-bind="text: fieldName"></td><td data-bind="text: fieldValue"></td></tr></tbody>型号:
self.resultData = ko.observableArray([]);self.getResultData = 函数 () {var data = Cobalt.Data.getResultData();self.resultData(data.searchDataList);};};Models.Field = 函数(数据){var self = this;self.fieldName = data.fieldName;self.fieldValue = 数据.fieldValue;};问题是我需要从 fieldName 和 fieldValue 格式的 resultData 创建一个表格数据，并且该表应该在单个 tr 中包含两组数据
4 's in a tr 但数据数组包含单个 fieldName 和 fieldValue；所以我们需要在 tr 中循环两次数据，然后将其递增.
按预期输出:
<小时>|字段名称 1 |字段值 2 ||字段名称 3 |字段值 4 |
|字段名称5 |字段值 6 ||字段名称 7 |字段值 8 |
您可以创建一个对项目进行配对的计算，如下所示:
self.rows = ko.computed(function(){var allItems = self.resultData();var 行 = [];for(var i = 0, len = allItems.length; i < len; i = i+2){行.推({左项目:所有项目[i]，rightItem:i + 1 <伦?allItems[i + 1] : 空});}返回行；});然后您将绑定到 rows 属性，而不是直接绑定到 resultData 属性.
@GOK 在评论中要求提供一个允许在一行中自定义数量的项目的版本.
您可以通过执行以下操作轻松实现此目的:
self.itemsOnEachRow = ko.observable(2);self.rows = ko.computed(function(){var allItems = self.resultData();var itemsPerRow = self.itemsOnEachRow();var 行 = [];for(var i = 0, len = allItems.length; i < len; i = i + itemsPerRow){var 行 = {};for(var itemIndex = 0; itemIndex < itemsPerRow; itemIndex++){var item = null;if (i + itemIndex < len){item = allItems[i + itemIndex];}row['item' + itemIndex] = item;}行.推(行)；}返回行；});然后每行将具有名为 item1、item2 等的属性，以itemsOnEachRow 可观察(某些如果总项目数不能被每行的项目数整除，则这些属性可能包含空引用).
我为此编写了一个示例，您可以在 http://jsfiddle.net/af7P2/上找到该示例.a>，但我不建议以该示例中完成的方式绑定表格.我不确定它会如何设置订阅，但它可能会多次订阅计算的 columns，每行一次.它只是为了显示计算的 rows 示例，而不是用于其他任何东西.
如果您希望每一行本身都是一个数组，您可以使用以下代码来实现:
self.itemsOnEachRow = ko.observable(2);self.rows = ko.computed(function(){var allItems = self.resultData();var itemsPerRow = self.itemsOnEachRow();var 行 = [];for(var i = 0, len = allItems.length; i < len; i = i + itemsPerRow){var 行 = [];for(var itemIndex = 0; itemIndex < itemsPerRow; itemIndex++){var item = null;if (i + itemIndex < len){item = allItems[i + itemIndex];}row.push(item);}行.推(行)；}返回行；});此版本的绑定(您可以在 http://jsfiddle.net/af7P2/1/) 好一点，因为它不使用 columns 为每一行计算一次.
一般来说，此解决方案可能效果不佳，具体取决于您的情况.向 resultData 数组添加/删除任何项目，或者更改 itemsOnEachRow 值，都会重新绑定整个表.可能对您来说不是问题，只是需要注意的事项.
I have a situation here for the knockout with for each binding with customization
Here is my code:
<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;
};
The problem is i need to create a tabular data from the resultData which is in fieldName and fieldValue formats and the table should be having two sets of data in a single tr means
4 's in a tr but the data array contains single fieldName and fieldValue; so we need to loop in a tr for two times of data and then increment it.
OUTPUT AS EXPECTED:
| FieldName1 |FieldValue2 || FieldName3 |FieldValue4 |
| FieldName5 | FieldValue6 || FieldName7 |FieldValue8 |
You could create a computed which would pair items, something like the following:
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;
});
You would then bind to the rows property instead of binding directly to the resultData property.
EDIT: @GOK asked, in a comment, for a version which would allow customizable number of items in a single row.
You could achieve this easily by doing something like the following:
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;
});
Each row would then have properties named item1, item2, etc, to the number of items set by the itemsOnEachRow observable (some of these properties might hold a null reference, if the total item count isn't evenly divisible by the items per row count).
I have written a sample on this, which you can find on http://jsfiddle.net/af7P2/, but I do not suggest binding the table in the way it is done in that sample. I'm not sure how it would set up subscriptions, but it might subscribe a multitude of times to the columns computed, one time for each row. It's just there to show a sample of the rows computed, not for anything else.
If you want each row to be an array in itself, you could do it with the following code:
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;
});
The bindings for this version (which you can find at http://jsfiddle.net/af7P2/1/) is a bit better, since it doesn't use the columns computed one time for each row.
In general, this solution might not perform very well, depending on your situation. Any addition/removal of items to the resultData array, or a change to the itemsOnEachRow value, would rebind the whole table. Might not be a problem for you, just something to be aware of.
这篇关于淘汰赛绑定，为每个人定制的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
