我在这里找到了类似的问题/答案:How to render a table with some fixed and some dynamic columns
但这并不能完全解决我的问题。我试图弄清楚如何将动态列的数量限制为每行5个,如果 View 模型中的项目超过5个,则创建新行并对数组中的所有5组重复。
例如:
var vm = {
item: { name: 'test1' },
item: { name: 'test2' },
item: { name: 'test3' },
item: { name: 'test4' },
item: { name: 'test5' },
item: { name: 'test6' }
};
给那个模型,我怎么能得到这张桌子?
<table>
<tr>
<td>test1</td>
<td>test2</td>
<td>test3</td>
<td>test4</td>
<td>test5</td>
</tr>
<tr>
<td>test6</td>
<tr>
</table>
最佳答案
为了处理这种情况,我可能会将逻辑推入您的 View 模型中,以便您的 View 可以保持简单。因此,想法是使用dependentObservable来表示您的“行”。然后,您的 View 可以只遍历行,然后遍历行中的单元格。
这是一个使该列数可观察的示例,因此可以动态更新它。 http://jsfiddle.net/rniemeyer/9TN9W/
var viewModel = {
items: ko.observableArray(),
columnLength: ko.observable(5)
};
//sample data
for (var i = 0; i < 100; i++) {
viewModel.items.push({ name: 'test' + i });
}
//return an array of rows. Each row is an array of items
viewModel.rows = ko.dependentObservable(function() {
var result = [],
colLength = parseInt(this.columnLength(), 10),
row;
//loop through items and push each item to a row array that gets pushed to the final result
for (var i = 0, j = this.items().length; i < j; i++) {
if (i % colLength === 0) {
if (row) {
result.push(row);
}
row = [];
}
row.push(this.items()[i]);
}
//push the final row
if (row) {
result.push(row);
}
return result;
}, viewModel);
关于javascript - Knockout.js-动态列,但每行最多5个,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/7669946/