sionjlewis/Checkbox List with Knockout JS.markdown

## Checkbox List with Knockout JS.markdown

      
    Raw
  

              Checkbox List with Knockout JS.markdown
            
          
    Checkbox List with Knockout JS
('-' * 30)
Uses Knockout JS to populate and checkbox list. This has been crafted with SharePoint in mind as the data source(s). This example demonstrated the observable array being updated by checkboxes. It does this by simply updating the text displayed by the textbox.
A Pen by Siôn J. Lewis on CodePen.
License.

  
## index.html
<html>
  <head>
    <title>Checkbox List (KO)</title>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/knockout/3.1.0/knockout-min.js"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.js"></script>
  </head>
  <body>
    <div class="formSection">
      <div class="ajaxLoader">Data Loading...</div>
      <div class="column divideBy1">
        <div class="label">
          <h1>Checkbox List (KO)</h1>
        </div>
      </div>
      <div class="clear"></div>

      <div class="column divideBy2">
          <label>Coverage:</label>
          <!-- foreach: optCoverage -->
          <ul id="ulCoverage1" class="ulCoverage" data-bind="foreach: optCoverage">
            <li>
              <!-- I would normally uses an ID opposed to text... -->
              <input type="checkbox" name="chbCoverage" data-bind="attr: { id: 'chkCoverages' + $index(), title: title }, value: title, checked: $root.selectedCoverage" />
              <label data-bind="text: title, attr: { id: 'lblCoverage' + $index(), title: title, 'for': 'chkCoverages' + $index() }"></label>
            </li>
          </ul>
      </div>
      <div class="column divideBy2">
        <label>Selected Coverage:</label>
        <input id="txtCoverageResults" type="text" style="width:400px;" data-bind="value: selectedCoverage" disabled="disabled" />
      </div>
      <div class="clear"></div>

    </div>
  </body>
</html>

## script.js
if (SJL === undefined || typeof (SJL) !== 'object') { var SJL = new Object(); }

SJL = function () {
  var self = {};
  return{
    onPageLoad: function () {
      SJL.ViewModel.applyViewModelBinding();
    }
  }
}();

SJL.ViewModel = function () {
  var self = {};
  self.vmMain = {
    optCoverage: [],
    selectedCoverage: ko.observableArray()
  }
  self.loadAsync_optCoverage = function (isActive) {
    var dfd = new jQuery.Deferred();
    try {
      SJL.Repository.get_optCoverage(
        function () {
          $('.ajaxLoader').show();
        },
        function (items) {
          var tmpArray = [];
          $.each(items, function (index, element) {
            tmpArray.push(new SJL.Model.optCoverage(element.id, element.title, element.active, element.order));
          });
		          self.vmMain.optCoverage = tmpArray; 	// For non-observables.
          //self.vmMain.optCoverage(tmpArray); 	// For observables.
          dfd.resolve('Options: "Coverage" loaded.');
        },
        isActive
      );
      return dfd.promise();
    } catch (ex) {
      alert('Error: loadAsync_optCoverage() ' + ex);
      return dfd.fail();
    }
  }
  self.load_selectedCoverage = function () {
    var tmpArray = SJL.Repository.get_selectedCoverage();
    self.vmMain.selectedCoverage(tmpArray);
  }
  return {
    applyViewModelBinding: function () {
      $('.ajaxLoader').show();
      $.when(self.loadAsync_optCoverage(true)).done(function () {
        self.load_selectedCoverage();
        ko.applyBindings(self.vmMain);
        $('.ajaxLoader').delay(250).fadeOut(250);
      });
      //alert('The code has run.');
    }
  }
}();

SJL.Model = function () {
  return {
    optCoverage: function (id, title, active, order) {
      this.id = id;
      this.title = title;
      this.action = active;
      this.order = order;
    }
  }
}();

SJL.Repository = function () {
  var self = {};
  self.get_optCoverage = function (beforeComplete, onComplete, isActive) {
    // So let's pretend to get data from SharePoint...
    fakeWebServiceCall = function () {
      var itemsArray = [];
      if (isActive === true) {
        itemsArray.push(new SJL.Model.optCoverage(1, 'Ireland', true, 1));
        itemsArray.push(new SJL.Model.optCoverage(2, 'New Zealand', true, 3));
        itemsArray.push(new SJL.Model.optCoverage(3, 'Spain', true, 4));
        itemsArray.push(new SJL.Model.optCoverage(4, 'Great Britain', true, 2));
      }
      if (onComplete && typeof (onComplete) === 'function') {
        onComplete(itemsArray);
      } else {
        CC.Utilities.logWarning('get_optCoverage()', 'callback function has not been passed.');
      }
    }
    if (beforeComplete && typeof (beforeComplete) === 'function') {
      beforeComplete();
    }
    fakeWebServiceCall();
  }
  self.get_selectedCoverage = function () {
    var itemsArray = [];
    // Normally I would use IDs and not text however this is to solve a specific business case...
    itemsArray.push('New Zealand');
    itemsArray.push('Great Britain');
    return itemsArray;
  }
  return {
    get_optCoverage: function (beforeComplete, onComplete, isActive) {
      return self.get_optCoverage(beforeComplete, onComplete, isActive);
    },
    get_selectedCoverage: function () {
      return self.get_selectedCoverage();
    }
  }
}();

SJL.Utilises = function () {
  var self = {};
  return {
  }
}();

$(document).ready(function () {
  SJL.onPageLoad();
});

## style.css
.formSection {
  clear:both;
  display:block;
  font-family: Arial, Helvetica, sans-serif;
}
.formSection  h1 {
    font-family: Arial, Helvetica, sans-serif;
    font-size:24px;
}
.formSection .column {
  display:block;
  float:left;
}
.formSection .divideBy1 {
    width:100%;
}
.formSection .divideBy3Quarters {
    width:75%;
}
.formSection .divideBy2Thirds {
    width:66.6%;
}
.formSection .divideBy2 {
    width:50%;
}
.formSection .divideBy3 {
    width:33.3%;
}
.formSection .divideBy4 {
    width:25%;
}
.formSection .label {
    display:block;
    float:left;
}
.formSection .control {
    display:block;
    float:left;
}
.formSection .ajaxLoader {
  display:none;
  border:0px none #fff;
  position:fixed;
  left:50%;
  top:50%;
  z-index:999999;
  height:22px;
  margin-top:-24px;
  width:130px;
  margin-left:-24px;
  /*background-image: url('/Style%20Library/_Branding/IMG/AjaxLoader.gif');*/
  background-repeat: no-repeat;
  background-position:50% 50%;
  background-color:red;
  color:white;
  padding:5px;
}
/* Cheers Fran */
input[type=checkbox] + label {
  color:black;
}
input[type=checkbox]:checked + label {
  color:red;
}

}
	<html>
	<head>
	<title>Checkbox List (KO)</title>
	<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/knockout/3.1.0/knockout-min.js"></script>
	<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.js"></script>
	</head>
	<body>
	<div class="formSection">
	<div class="ajaxLoader">Data Loading...</div>
	<div class="column divideBy1">
	<div class="label">
	<h1>Checkbox List (KO)</h1>
	</div>
	</div>
	<div class="clear"></div>

	<div class="column divideBy2">
	<label>Coverage:</label>
	<!-- foreach: optCoverage -->
	<ul id="ulCoverage1" class="ulCoverage" data-bind="foreach: optCoverage">
	<li>
	<!-- I would normally uses an ID opposed to text... -->
	<input type="checkbox" name="chbCoverage" data-bind="attr: { id: 'chkCoverages' + $index(), title: title }, value: title, checked: $root.selectedCoverage" />
	<label data-bind="text: title, attr: { id: 'lblCoverage' + $index(), title: title, 'for': 'chkCoverages' + $index() }"></label>
	</li>
	</ul>
	</div>
	<div class="column divideBy2">
	<label>Selected Coverage:</label>
	<input id="txtCoverageResults" type="text" style="width:400px;" data-bind="value: selectedCoverage" disabled="disabled" />
	</div>
	<div class="clear"></div>

	</div>
	</body>
	</html>
	if (SJL === undefined \|\| typeof (SJL) !== 'object') { var SJL = new Object(); }

	SJL = function () {
	var self = {};
	return{
	onPageLoad: function () {
	SJL.ViewModel.applyViewModelBinding();
	}
	}
	}();

	SJL.ViewModel = function () {
	var self = {};
	self.vmMain = {
	optCoverage: [],
	selectedCoverage: ko.observableArray()
	}
	self.loadAsync_optCoverage = function (isActive) {
	var dfd = new jQuery.Deferred();
	try {
	SJL.Repository.get_optCoverage(
	function () {
	$('.ajaxLoader').show();
	},
	function (items) {
	var tmpArray = [];
	$.each(items, function (index, element) {
	tmpArray.push(new SJL.Model.optCoverage(element.id, element.title, element.active, element.order));
	});
	self.vmMain.optCoverage = tmpArray; // For non-observables.
	//self.vmMain.optCoverage(tmpArray); // For observables.
	dfd.resolve('Options: "Coverage" loaded.');
	},
	isActive
	);
	return dfd.promise();
	} catch (ex) {
	alert('Error: loadAsync_optCoverage() ' + ex);
	return dfd.fail();
	}
	}
	self.load_selectedCoverage = function () {
	var tmpArray = SJL.Repository.get_selectedCoverage();
	self.vmMain.selectedCoverage(tmpArray);
	}
	return {
	applyViewModelBinding: function () {
	$('.ajaxLoader').show();
	$.when(self.loadAsync_optCoverage(true)).done(function () {
	self.load_selectedCoverage();
	ko.applyBindings(self.vmMain);
	$('.ajaxLoader').delay(250).fadeOut(250);
	});
	//alert('The code has run.');
	}
	}
	}();

	SJL.Model = function () {
	return {
	optCoverage: function (id, title, active, order) {
	this.id = id;
	this.title = title;
	this.action = active;
	this.order = order;
	}
	}
	}();

	SJL.Repository = function () {
	var self = {};
	self.get_optCoverage = function (beforeComplete, onComplete, isActive) {
	// So let's pretend to get data from SharePoint...
	fakeWebServiceCall = function () {
	var itemsArray = [];
	if (isActive === true) {
	itemsArray.push(new SJL.Model.optCoverage(1, 'Ireland', true, 1));
	itemsArray.push(new SJL.Model.optCoverage(2, 'New Zealand', true, 3));
	itemsArray.push(new SJL.Model.optCoverage(3, 'Spain', true, 4));
	itemsArray.push(new SJL.Model.optCoverage(4, 'Great Britain', true, 2));
	}
	if (onComplete && typeof (onComplete) === 'function') {
	onComplete(itemsArray);
	} else {
	CC.Utilities.logWarning('get_optCoverage()', 'callback function has not been passed.');
	}
	}
	if (beforeComplete && typeof (beforeComplete) === 'function') {
	beforeComplete();
	}
	fakeWebServiceCall();
	}
	self.get_selectedCoverage = function () {
	var itemsArray = [];
	// Normally I would use IDs and not text however this is to solve a specific business case...
	itemsArray.push('New Zealand');
	itemsArray.push('Great Britain');
	return itemsArray;
	}
	return {
	get_optCoverage: function (beforeComplete, onComplete, isActive) {
	return self.get_optCoverage(beforeComplete, onComplete, isActive);
	},
	get_selectedCoverage: function () {
	return self.get_selectedCoverage();
	}
	}
	}();

	SJL.Utilises = function () {
	var self = {};
	return {
	}
	}();

	$(document).ready(function () {
	SJL.onPageLoad();
	});
	.formSection {
	clear:both;
	display:block;
	font-family: Arial, Helvetica, sans-serif;
	}
	.formSection h1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size:24px;
	}
	.formSection .column {
	display:block;
	float:left;
	}
	.formSection .divideBy1 {
	width:100%;
	}
	.formSection .divideBy3Quarters {
	width:75%;
	}
	.formSection .divideBy2Thirds {
	width:66.6%;
	}
	.formSection .divideBy2 {
	width:50%;
	}
	.formSection .divideBy3 {
	width:33.3%;
	}
	.formSection .divideBy4 {
	width:25%;
	}
	.formSection .label {
	display:block;
	float:left;
	}
	.formSection .control {
	display:block;
	float:left;
	}
	.formSection .ajaxLoader {
	display:none;
	border:0px none #fff;
	position:fixed;
	left:50%;
	top:50%;
	z-index:999999;
	height:22px;
	margin-top:-24px;
	width:130px;
	margin-left:-24px;
	/background-image: url('/Style%20Library/_Branding/IMG/AjaxLoader.gif');/
	background-repeat: no-repeat;
	background-position:50% 50%;
	background-color:red;
	color:white;
	padding:5px;
	}
	/* Cheers Fran */
	input[type=checkbox] + label {
	color:black;
	}
	input[type=checkbox]:checked + label {
	color:red;
	}

	}