Using Scripts in Custom Extensions
Custom extensions are already useful for reuse of VDL and HTML snippets. But they really come into their own when combined with scripting, which allows much greater functionality and interactivity, and is how most of the core VDL extensions were developed.
Scripts are implemented in standard JavaScript and are assigned to custom extensions using calls to a global VDL 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> The above example represents the simplest call it is possible to make to the VDL 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 VDL script call.
In situations like this, where scripts are being added to a VDL 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 VDL function as its first argument must be identical to the name attribute of the
<vdl-extension> element so that the proper assignments can be made between the script, the VDL template and the custom extension.
|
At this point, we have reached a stage that represents a template for a new script-enabled VDL custom extension. To make it do something, the VDL function needs to be passed one or more options.