Functions
General Usage
The general usage of Alpaca is one where you pass a JSON object into the $.alpaca method to inspire the rendering
of your form. The general usage follows a structure like this:
$("#id").alpaca({
"data": {},
"schema": {},
"options": {},
"postRender": function(control) {
}
});
This will use the information provided by schema
and options
to render a form containingdata
into the DOM element with ID id
. Once the form has finished rendering, thepostRender
method will be triggered and will be given the form's control instance.
The $.alpaca method is a jQuery plugin method and, as such, in conforming with the way that jQuery plugins are
intended to work, it hands itself back. Thus, in the code block above, the $("#id").alpaca() invocation hands back
the $("#id") array itself.
If you call $.alpaca on a DOM element that already has an Alpaca form rendered into it, the existing form will be
discovered and no operation will take place.
DOM-driven Usage
If no form configuration is provided, Alpaca will inspect the underlying DOM element as best it can to determine what
to render.
Consider the following in all of its glory:
HTML:
{% raw %}
<div id='thor'>
{
"data": {
"name": "Thor"
},
"schema": {
"type": "string"
},
"options": {
"type": "text",
"label": "Name"
}
}
</div>
{% endraw %}
JS:
{% raw %}
$("#thor").alpaca();
{% endraw %}
This renders thusly:
Special Functions
You can also use the $.alpaca method to fire one of a special set of functions.
Function Name | Returns | Description |
---|---|---|
get | Control Field | Retrieves the control instance for an existing Alpaca form |
exists | boolean | Whether the DOM element has an existing Alpaca form bound to it |
destroy | undefined | Destroys an existing Alpaca form bound to the DOM element. If none exists, this simply returns |
get
Use the get
function to get the control instance for a previously rendered form.
Here is an example where we retrieve the control via the $.alpaca method.
And then, for giggles, we put a blue border around the underlying input element.
exists
Use the exists
function to check whether a DOM element has an Alpaca form.
Here is a nifty example:
destroy
Use the destroy
function to tear down an existing Alpaca form that is bound to a DOM element.
Here is how the destruction is dealt:
Here is an example where we do the same thing against a more complex form. We create a few buttons for 'show', 'hide'
and 'destroy'. The buttons use special functions to find the form instance and do things with it.