Knockout - foreach data binding on 2 table columns table
I have the following table where I am trying to loop over coverage lines. I would like to have two columns in each column with a different row, however my code duplicates the same coverage in each column. Any suggestions on how to get a two column layout without repeating? Which element should the foreach binding contain? Thank.
<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>
source to share
You can add a property computed
to your model that structures the data the way you want. Here's a JSFiddle example: http://jsfiddle.net/6gvtz51g/ . The advantage of this approach is that you can specify a different line size if you 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());
source to share
How do you feel about this as a solution? It is not as flexible as the solution given by @JackieChiles in that it will take a different number of lines to work. But the code I provided provides a prettier two-column lookup, as well as the ability to keep track of the checkboxes next to each of your items. I suspect a mix of both of our solutions will be in your final 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 in action http://jsfiddle.net/ozrevulsion/sva9tnje/
source to share