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 containing data into the DOM element with ID id. Once the form has finished rendering, the postRender 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:

{% raw %} {% endraw %}

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.

{% raw %} {% endraw %}

exists

Use the exists function to check whether a DOM element has an Alpaca form. Here is a nifty example:

{% raw %} {% endraw %}

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:

{% raw %} {% endraw %}

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.

{% raw %} {% endraw %}