Knockout and ChartJS with ES6 and UnderscoreJs

A sample showing how KnockOut can be applied to ChartJs, using ES6. It uses UnderscoreJs to perform some functional operations.

by Jaume Vinyes

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.1/knockout-debug.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout-validation/2.0.3/knockout.validation.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.js"></script>
<div class='ViewModelScope'...

Babel + JSX

/******************* Boiler Plate Bootstrap *******************/
$(document).ready(() => {
  let data = $(".ViewModelScope").data("model");
  let viewModel = new ChartViewModel(data);  
  viewModel.Initialize();
});
 
/******************* ViewModelBase *******************/
class ViewModelBase {
  constructor(data) {
    if (this.constructor === ViewModelBase) {
      throw new TypeError("Cannot construct abstract class ViewModelBase.");
    }
    this.Original = data; 
  }

  Initialize() {
    let knockoutValidationSettings = {
      insertMessages: false,
      decorateElement: true,
      errorElementClass: "input-error", // defined at site.css
      grouping: {
        deep: true,
        observable: true,
        live: true
      }
    };
    ko.validation.init(knockoutValidationSettings, true);
    ko.mapping.fromJS(this.Original, {}, this);
    ko.applyBindings(this, document.getElementsByClassName("ViewModelScope")[0]);
  }
};    
  
/******************* ChartViewModel *******************/
class ChartViewModel extends ViewModelBase {
  constructor(data) {
    super(data);
  }   
 
  Initialize() {
    this.ChartType = ko.observable(this.GetChartType());  
    this.ChartDataView = this.GetChartDataView();
    this.ChartSource = ko.observable(this.GetChartSource());  
    this.ChartOptions = ko.observable(this.GetChartOptions());
    this.SetBindingHandlers();
    super.Initialize();
  }  
  
  SetBindingHandlers() {
    ko.bindingHandlers.type = {
       	update: function (element, valueAccessor, allBindingsAccesor, viewModel, bindingContext){       
					viewModel.DrawChart(element);
         }
     }; 
  	ko.bindingHandlers.source = {
       	update: function (element, valueAccessor, allBindingsAccesor, viewModel, bindingContext){       
					viewModel.DrawChart(element);
        }
     };
     ko.bindingHandlers.options = {
       	update: function (element, valueAccessor, allBindingsAccesor, viewModel, bindingContext){      ...