alpacajs

by bvotcode

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.3.0/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.2/bootstrap/alpaca.min.css">
<script src="//code.cloudcms.com/alpaca/1.5.2/bootstrap/alpaca.min.js"></script>
<link type="text/css" href="//cdn.jsdelivr.net/npm/[email protected]/dist/alpaca/bootstrap/alpaca.min.css" rel="stylesheet"/>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js"></script>
<link type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

<script type="text/javascript" src="//cdn.jsdelivr.net/npm/[email protected]/dist/alpaca/bootstrap/alpaca.min.js"></script>
<div id="field1"></div>

JavaScript

Alpaca.registerView({
    "id": "my-view",
    "parent": "bootstrap-edit",
    "callbacks": {
        "control": function() {
            this.getControlEl().addClass("wow");
        }
    }
});
var input_schema =  {"title": "What do you think of Alpaca?", "type": "object", "properties": { "name": { "type": "string", "title": "NameA" }, "ranking": { "type": "string", "title": "Ranking", "enum": ['excellent', 'not too shabby', 'alpaca built my hotrod']}}};
$("#field1").alpaca({
    "data": {0:{}},
    "schema": {"type":"object","properties": {"title": "What do you think of Alpaca?", "type": "object", "properties": { "name": { "type": "string", "title": "NameA" }, "ranking": { "type": "string", "title": "Ranking", "enum": ['excellent', 'not too shabby', 'alpaca built my hotrod']}}} },
    "options": {
        "type": "map",
        "toolbarSticky": true,
        "fields": {
            "item": {
                "fields": {
					"_key": {
						"type": "hidden"
					},
					"foster": {
						"type": "checkbox"
					},
					"noincome": {
						"type": "checkbox"
					}
                }
            }
        },
        "form": {
            "buttons": {
                "submit": {
                    "title": "View",
                    "click": function() {
                        var value = this.getValue();
                        alert(JSON.stringify(value, null, "  "));
                    }
                }
            }
        }
    },
    "view":"my-view"
});