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,
"events": {
"change": function() {
self.coOp = self._getCon(self.all, this.getValue());
console.log('coOp', self.coOp);
// self._construct();
}
}
},
"select2": {
"type": "select",
"optionLabels": self.coOp
}
}
}
});
}
all = _getAll();
de = _getDe(all);
_construct();