Knockout Rendering

by Robodude

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<div id="app">
  
  <input type="checkbox" id="all" data-bind="checked: selectAll">
  <label for="all">All</label>
  
  <div data-bind="foreach: rows">
    <div>
      <input type="checkbox" data-bind="checked: selected, attr: { id: id }">
      <label data-bind="text: id, attr: { for: id }"></label>
    </div>
  </div>
  
</div>

JavaScript

let rows = [];
for (let i = 0; i < 10000; i++){
	rows.push({
  	id: i,
    selected: ko.observable(false)
  });
}

class ViewModel {
	constructor(rows){
  	this.selectAll = ko.observable(false);
    this.rows = rows;
    
    this.selectAll.subscribe((newValue)=>{
      	if (newValue) 
        { 
          this.rows.forEach(x=> { x.selected(true) });
        }
        else
        {
          this.rows.forEach(x=> { x.selected(false) });
        }
    });
  }
}

var vm = new ViewModel(rows);

ko.applyBindings(vm, document.getElementById("app"));