Hooks.js
Global Properties
Property Name | Type | Values |
---|---|---|
| string |
|
Hooks are an incredibly powerful way to extend your Elements, performing heavy manipulations on properties before using them in your templates. Every Element can specify it's own hooks Javascript file, named hooks.js
and placed in the root directory of the element.
Available Context methods
Method Name | Type | Values |
---|---|---|
| ||
| ||
| ||
| ||
|
Setting Values
in hooks.js
in template.html
The rendered output would look something like this:
Mario - Plumber
Transform Hook
The transform hook allows you to get and set property values before they're used in templates. Let's assume you have the following slider defined in your properties and you're using the value in a template.
When the slider is set to 5, the output would be
Now lets add a transform hook that multiplies the padding value by 2
With the slider still set to 5, when the template is processed the output will be
This becomes incredibly powerful and convenient when you need to perform logic based on multiple properties. The following example show how you might generate a list of css classes based on standard or custom settings.
The template simply uses the classes property instead of attempting to handle all options from 7 different properties. For example
Last updated