alpaca
Version:
Alpaca provides the easiest and fastest way to generate interactive forms for the web and mobile devices. It runs simply as HTML5 or more elaborately using Bootstrap, jQuery Mobile or jQuery UI. Alpaca uses Handlebars to process JSON schema and provide
111 lines (87 loc) • 3.45 kB
HTML
<html>
<head>
<title>DOJO loader Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=9">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- stylesheets -->
<!--this contains jquery already-->
<link type="text/css" href="../../components/alpaca/alpaca.css" rel="stylesheet"/>
<!-- third-party javascript -->
<!--replace the below CDN with a local DOJO SDK to get better error reporting-->
<script src="./lib/dojo.js.uncompressed.js" data-dojo-config="async: false
,'dojo-publish-privates':1, trace:{'loader-finish-exec':1}
, packages: [
{
'name': 'jquery',
'location':'../../lib/jquery-2.1.0',
'main': 'jquery-2.1.0.min'
},
{
'name': 'jquery-ui',
'location':'../../lib/jquery-ui-latest',
'main': 'jquery-ui-latest.custom.min'
},
{
'name': 'handlebars',
'location':'../../lib/jquery-2.1.0',
'main': 'jquery-2.1.0.min'
},
{
'name': 'alpaca',
'location':'../../../components/alpaca',
'main': 'alpaca'
}
]
"></script>
</head>
<body>
<div id="spa">
<button id="toggle">Toggle</button>
<br/>
<div id="form"></div>
</div>
</body>
<script type="text/javascript">
//needed to load jquery, required by alpaca.js
define.amd.jQuery = true;
//the "main" function
require([
"jquery",
"jquery-ui",
"handlebars",
"alpaca",
"dojo/domReady!" ],
function (jquery, jq_ui, jq_tmpl, alpacax) {
function initView() {
jQuery.noConflict(); // can be used to give up the $ function !!!
var detailAlpacaControlField;
jquery("#toggle").click(function () {
if (!detailAlpacaControlField) {
//alpaca test
jquery("#form")
.alpaca({
"dataSource": "./data.json",
"schemaSource": "./schema.json",
"optionsSource": "./options.json",
"viewSource": "./view.json",
"postRender": function (renderedField) {
//detailAlpacaControlField = renderedField.form; //depending on what we have build a view or a form !!!
//detailAlpacaControlField = Alpaca("#form");
detailAlpacaControlField = renderedField;
}
});
//alpaca test end
}
else {
detailAlpacaControlField.destroy();
detailAlpacaControlField = null;
}
});
}
Alpaca.setDefaultLocale("de_AT");
initView();
});
</script>
</html>