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
67 lines (53 loc) • 2.11 kB
HTML
<script type="text/x-handlebars-template">
<div>
<div class="alpaca-array-toolbar" {{#compare options.toolbarStyle "button"}} btn-group{{/compare}}>
{{#each arrayToolbarActions}}
{{#compare ../options.toolbarStyle "link"}}
<a href="#" class="alpaca-array-toolbar-action" data-array-toolbar-action="{{action}}">{{{label}}}</a>
{{/compare}}
{{#compare ../options.toolbarStyle "button"}}
<button class="alpaca-array-toolbar-action btn {{../view.styles.button}}" data-array-toolbar-action="{{action}}">
{{#if this.iconClass}}
<i class="{{iconClass}}"></i>
{{/if}}
{{#if label}}{{{label}}}{{/if}}
</button>
{{/compare}}
{{/each}}
</div>
<table>
<!-- table headers -->
<thead>
<tr>
{{#each options.fields}}
<th>{{{label}}}</th>
{{/each}}
<th>Actions</th>
</tr>
</thead>
<!-- table body -->
<tbody>
{{#each items}}
<tr>
{{#each data}}
<td>{{{.}}}</td>
{{/each}}
<!-- actions cell -->
<td>
<div class="alpaca-array-item-actions btn-group">
{{#each ../arrayItemActions}}
<button class="alpaca-array-item-action {{../../view.styles.button}}" data-array-item-action="{{action}}">
{{#if iconClass}}
<i class="{{iconClass}}"></i>
{{/if}}
{{#if label}}{{{label}}}{{/if}}
</button>
{{/each}}
</div>
</td>
</tr>
{{/each}}
</tbody>
</table>
</div>
</script>