Using Scripts in Custom Extensions
Custom extensions are useful as they enable reuse of snippets, as such they are powerful when combined with scripting. This allows much greater functionality and interactivity, and is how most of the core custom extensions are developed.
Scripts are implemented in standard JavaScript and are assigned to custom extensions using calls to a global function available anywhere in your view. The function takes two arguments—the tag name and a JavaScript Object for any configuration needed:
<script>
VDL('extension-name', {});
</script> This example represents the simplest call to the function. In this case, the only purpose it serves is to define (or enhance) a custom extension—called here
<extension-name>—which could be used immediately.
<extension-name></extension-name>At this stage, this would have little effect because no options have been supplied as the second argument to the script call.
In situations like this, where scripts are being added to a custom extension definition, the
<script> block is placed within the
<vdl-extension> element:
<vdl-extension name="my-extension">
<vdl-template>...<vdl-contents></vdl-contents>...</vdl-template>
<script>
VDL('my-extension', {});
</script>
</vdl-extension>
|
Note The string provided to the function as its first argument must be identical to the name attribute of the
<vdl-extension> element (
my-extension) so that the proper assignments can be made between the script, the VDL template and the custom extension.
|
This example now represents a template for a new script enabled custom extension. To make it do something, the function needs to be passed one or more options.