Alpaca Form with Complex Schema (working)

HTML

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//code.cloudcms.com/alpaca/1.5.17/bootstrap/alpaca.min.css">
<script src="//code.cloudcms.com/alpaca/1.5.17/bootstrap/alpaca.min.js"></script>
<div id="form"></div>

JavaScript

var de = [];
var all = [];


var _getCon = function(all, deId) {
  var coOp = [];
  all.forEach(function(obj) {
    if(obj.type === deId) {
      coOp.push(obj.a);
    }
  });
  return coOp;
};


var _getDe = function(all) {
  var de = [];
  all.forEach(function(obj) {
    if(de.indexOf(obj.type) === -1) {
      de.push(obj.type);
    }
  });
  return de;
};


var _getAll = function() {
  return [
    { a: 1, b: 2, type: 'forest' },
    { a: 11, b: 22, type: 'forest' },
    { a: 1111, b: 222, type: 'lake' },
    { a: 11111, b: 2222, type: 'lake' }
  ];
};


var _construct = function() {
	var self = this;
  $("#form").alpaca({
    "schema": {
      "type":"object",
      "properties": {
        "select1": {
          "type":"string",
          "title":"select1",
          "enum": self.de
        },
        "select2": {
          "type":"string",
          "title":"select2",
          "enum": self.coOp
        }    
      }
    },
    "options": {                      
      "fields": {
        "select1": {
          "type": "select",
          "optionLabels": self.de                          
        },
        "select2": {
          "type": "select"
        }
      }
    },
    "postRender": function (control) {
    		let sel1 = control.childrenByPropertyId['select1'],
        		sel2 = control.childrenByPropertyId['select2'];
    		sel1.on('change', function () {
        		let values = self._getCon(self.all, this.getValue());
        		sel2.options.dataSource = values.map(v => ({text: v, value: v}));
            sel2.refresh();
        });
    }
  });
}


all = _getAll();
de = _getDe(all);
_construct();