Knockout - foreach databind in 2 column table layout - html

Question

I have the following table where I'm attempting to loop through coverage lines. I would like 2 columns with a different line in each, however my code duplicates the same coverage in each column. Any suggesions on how to get a 2 column layout without the repetition? Which element should my foreach binding go on? Thanks.
<table class="coverage-table" data-bind="foreach: $root.clientVM.CustomCoverageLines">
<tr>
<td>
<input type="checkbox" data-bind="checked: Checked" />
<label>
<span data-bind="text: $data.Description"></span>
</label>
</td>
<td>
<input type="checkbox" data-bind="checked: Checked" />
<label>
<span data-bind="text: $data.Description"></span>
</label>
</td>
</tr>
</table>

Answer 1

You could add a computed property to your model that structures the data in the way that you want. See this JSFiddle for an example: http://jsfiddle.net/6gvtz51g/. An advantage to this approach is that you can specify a different row size if you would like.
HTML
<table data-bind="foreach: coverageLineRows">
<tr data-bind="foreach: $data">
<td>
<span data-bind="text: $data"></span>
</td>
</tr>
</table>
JavaScript
function ViewModel () {
var self = this;
self.coverageLines = ko.observableArray([
'Medical',
'Dental',
'Vision',
'Life'
]);
self.coverageLineRowSize = ko.observable(2);
self.coverageLineRows = ko.computed(function () {
var rows = [];
var i = 0;
var lines = self.coverageLines();
var size = self.coverageLineRowSize();
while (i < lines.length) {
rows.push(lines.slice(i, i += size));
}
return rows;
});
}
ko.applyBindings(new ViewModel());

Answer 2

How do you feel about this as a solution? Its not as flexible as the solution given by #JackieChiles in that it would need some tweaking to work with different amounts of rows. But the code I've provided does provide for a prettier look for two columns and it also has the ability to keep track of the check boxes next to each of your items. I suspect a combination of both our solutions will be in your end product :)
var vm = function () {
var self = this;
this.array = ko.observableArray([{
name: ko.observable('Medical'),
checked: ko.observable()
}, {
name: ko.observable('Dental'),
checked: ko.observable()
}, {
name: ko.observable('Vision'),
checked: ko.observable()
}, {
name: ko.observable('Life'),
checked: ko.observable()
}, {
name: ko.observable('Other'),
checked: ko.observable()
}]);
this.coverageSplit = ko.computed(function () {
var retArray = [];
var i = 0;
var arrayUnWrapped = this.array();
while (i < arrayUnWrapped.length) {
if (i >= arrayUnWrapped.length - 1) {
retArray.push({
col1: arrayUnWrapped[i],
col2: {
name: '',
checked: false,
hideThisCheck: true
}
})
console.log(retArray[retArray.length - 1]);
break;
}
retArray.push({
col1: arrayUnWrapped[i],
col2: arrayUnWrapped[i + 1]
});
i += 2;
}
return retArray;
});
this.check_click = ko.observable('None');
this.setLastClicked = function (name) {
if (name.length > 0) self.check_click(name);
};
};
ko.applyBindings(vm);
Here is a fiddle of it in action http://jsfiddle.net/ozrevulsion/sva9tnje/