Alpaca provides the easiest way to generate interactive HTML5 forms for web and mobile applications. It uses JSON Schema and simple Handlebars templates to generate great looking, dynamic user interfaces on top of Twitter Bootstrap, jQuery UI, jQuery Mobile and HTML5.
I've been trying to figure out how to get templates to work when the data is an array. I've given up on using view.layout.template when the data is an array and decided to work around using a loop through the data array to generate a new alpaca object for each data item.
I would still love to figure out a better way or at least get the "{{#each data}}" in view.globalTemplate to work. The issue with "{{#each data}}" in view.globalTemplate is it seems like only the first data item is actually rendered to the DOM. Even though the other data items are having "renderField()" called, they cannot be found in the DOM (via inspector).
I am using custom templates/layouts in order to have fine control over the rendered html and exact placement of the fields. Thanks for all your hard work on this great project!
Here is my template:
``
Notice that "log" shows all the data items successfully, not just the first one.
Here is my schema and data:
`let data = [{
"name": "One",
"age": 1
},
{
"name": "Two",
"age": 2
},
{
"name": "Three",
"age": 3
}
];
I've been trying to figure out how to get templates to work when the data is an array. I've given up on using view.layout.template when the data is an array and decided to work around using a loop through the data array to generate a new alpaca object for each data item.
I would still love to figure out a better way or at least get the "{{#each data}}" in view.globalTemplate to work. The issue with "{{#each data}}" in view.globalTemplate is it seems like only the first data item is actually rendered to the DOM. Even though the other data items are having "renderField()" called, they cannot be found in the DOM (via inspector).
I am using custom templates/layouts in order to have fine control over the rendered html and exact placement of the fields. Thanks for all your hard work on this great project!
Here is my template: ``
Notice that "log" shows all the data items successfully, not just the first one.
Here is my schema and data: `let data = [{ "name": "One", "age": 1 }, { "name": "Two", "age": 2 }, { "name": "Three", "age": 3 } ];
let schema = { "type": "array", "items": { "type": "object", "properties": { "name": { "type": "string" }, "age": { "type": "integer" } }} };
$("#o").alpaca({ "data": data, "schema": schema, "view": { "globalTemplate": "#template1" } });`