html - Knockout - foreach databind in 2 column table layout -
i have following table i'm attempting loop through coverage lines. 2 columns different line in each, code duplicates same coverage in each column. suggesions on how 2 column layout without repetition? element should 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>
you add computed
property model structures data in way want. see jsfiddle example: http://jsfiddle.net/6gvtz51g/. advantage approach can specify different row size if 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 = 0; var lines = self.coveragelines(); var size = self.coveragelinerowsize(); while (i < lines.length) { rows.push(lines.slice(i, += size)); } return rows; }); } ko.applybindings(new viewmodel());
Comments
Post a Comment