I found a similar question/answer here: How to render a table with some fixed and some dynamic columns
But it does not completely solve my problem. I am trying to figure out how I can limit the number of dynamic columns to 5 per row and if there are more than 5 items in the view model, make a new row and repeat for all groups of 5 in the array.
For example:
var vm = {
item: { name: 'test1' },
item: { name: 'test2' },
item: { name: 'test3' },
item: { name: 'test4' },
item: { name: 'test5' },
item: { name: 'test6' }
};
Give that model, how can I get this table?
<table>
<tr>
<td>test1</td>
<td>test2</td>
<td>test3</td>
<td>test4</td>
<td>test5</td>
</tr>
<tr>
<td>test6</td>
<tr>
</table>
To handle a situation like this, I would probably push the logic into your view model, so that your view can remain simple. So the idea would be to use a dependentObservable to represent your "rows". Then, your view can just foreach through the rows and then foreach through the cells in your row.
Here is a sample that makes that number of columns an observable, so that it can be dynamically updated. 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);
The closest I've been able to get to a solution is this:
<table>
<tbody>
<tr data-bind="template: { name: 'rowTmpl', foreach: items}">
</tr>
</tbody>
</table>
<script id="rowTmpl" type="text/html">
<td data-bind="text: name"></td>
<!-- ko if: (vm.items.indexOf($data) + 1) % 5 == 0 -->
<td>new row html here</td>
<!-- /ko -->
</script>
vm = {
items: ko.observableArray([
{ name: 'test1' },
{ name: 'test2' },
{ name: 'test3' },
{ name: 'test4' },
{ name: 'test5' },
{ name: 'test6' }
])
}
ko.applyBindings(vm);
.. which outputs this:
| test1 | test2 | test3 | test4 | test5 | new row html here | test6 |
This inserts a new element on every 5th item. However, if I substitute <td>new row html here</td>
with </tr><tr>
the template engine throws an error. Maybe, some other SO-er can build on this and show how to output not strictly correct html.
Anyway, hope this helps a little.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With