Handsontable example

by Gabriel Vazquez

HTML

<div>
  <div id="example1" class="hot handsontable htColumnHeaders"></div>
</div>
<p>
  <button id="add_car" class="intext-btn">Simulate a new Car</button>
  <select multiple="multiple" id="example1_events"></select>
</p>

CSS

</style><!-- Ugly Hack due to jsFiddle issue -->

<script src="https://docs.handsontable.com/0.21.0/bower_components/handsontable/dist/handsontable.full.js"></script>
<link type="text/css" rel="stylesheet" href="https://docs.handsontable.com/0.22.0/bower_components/handsontable/dist/handsontable.full.min.css">
<script src="https://docs.handsontable.com/0.22.0/bower_components/lodash/lodash.min.js"></script>
<script src="https://docs.handsontable.com/0.22.0/bower_components/backbone/backbone.js"></script>
<script src="https://docs.handsontable.com/0.22.0/bower_components/backbone.relational/backbone-relational.js"></script>

JavaScript

document.addEventListener("DOMContentLoaded", function() {

  var
    container = document.getElementById('example1'),
    addCar = document.getElementById('add_car'),
    eventHolder = document.getElementById('example1_events'),
    CarModel = Backbone.Model.extend({}),
    CarCollection,
    cars,
    hot;
  
  CarCollection = Backbone.Collection.extend({
    model: CarModel,
    // Backbone.Collection doesn't support `splice`, yet! Easy to add.
    splice: hackedSplice
  });
  
  cars = new CarCollection();
  
  // since we're not using a server... make up some data. This will make
  // a couple CarModels from these plain old objects
  cars.add([
    {make: 'Dodge', model: 'Ram', year: 2013, weight: 6811},
    {make: 'Toyota', model: 'Camry', year: 2014, weight: 3190},
    {make: 'Smart', model: 'Fortwo', year: 2015, weight: 1808}
  ]);
  
  hot = new Handsontable(container, {
    data: cars,
    dataSchema: makeCar,
    contextMenu: true,
    columns: [
      attr('make'),
      attr('model'),
      attr('year')
    ],
    colHeaders: ['Make', 'Model', 'Year'],
    columnSorting:true
    // minSpareRows: 1 //see notes on the left for `minSpareRows`
  });
  
  // this will log all the Backbone events getting fired!
  cars.on('all', logEvents)
    .on('add', function () {
      hot.render();
    })
    .on('remove', function () {
      hot.render();
    });
  
  // you'll have to make something like these until there is a better
  // way to use the string notation, i.e. "bb:make"!
  
  // normally, you'd get these from the server with .fetch()
  function attr(attr) {
    // this lets us remember `attr` for when when it is get/set
    return {data: function (car, value) {
      if (_.isUndefined(value)) {
        return car.get(attr);
      }
      car.set(attr, value);
    }};
  }
  
  // just setting `dataSchema: CarModel` would be great, but it is non-
  // trivial to detect constructors...
  function makeCar() {
    return new CarModel();
  }
  
  // use the...