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

Popular posts from this blog

yii2 - Yii 2 Running a Cron in the basic template -

asp.net - 'System.Web.HttpContext' does not contain a definition for 'GetOwinContext' Mystery -

mercurial graft feature, can it copy? -