Returns the Handlebars instance for the current Hype document. This is needed to register custom helper or do any other kind of Handlebars API call that can be found in the Handlebars guide and in the Handlebars API reference
hypeDocument.getHandlebars();
Object
Returns the Handlebars API for the current Hype document
Update all handlebars in the scene
hypeDocument.updateHandlebars();
Name | Type | Description | |
---|---|---|---|
options |
Object
|
The optional object containing regular and Hype specific Handlebars options, defaults to useful Hype specific options if not set |
|
elms |
Nodelist
|
This is an optional nodelist to limit the update to a specific set of HTML elements |
Void
Convenience wrapper to hypeDocument.updateHandlebars method putting the nodelist argument first to avoid passing a null
var elms = document.querySelector('.myHandleBars');
hypeDocument.updateHandlebarsByNodelist(elms);
Name | Type | Description | |
---|---|---|---|
elms |
Nodelist
|
This is an optional nodelist to limit the update to a specific set of HTML elements |
|
options |
Object
|
The optional object containing regular and Hype specific Handlebars options, defaults to useful Hype specific options if not set |
Void
This function is what is actually being called to make the Handlebar updates and set the option defaults before doing so. These include additional helper functions and shortcuts. By default Hype Handlebars extends the regular Handlebars instance with the Hype context it is compiled in, giving you access to hypeDocument and if available the current symbolInstance. This allows for function calls to the API of the hypeDocument or symbolInstance.
var elm = hypeDocument.getElementById('myElement');
hypeDocument.updateHandlebarsByElement(elm, {
disableHypeResolver: true,
disableQueryHelper: true,
disableHypeVariables: true,
});
disableHypeResolver: true
removes the possibility to call Hype function from within Hype Handlebar, false is default and allow then Hype Handlebars will try to resolve the helper name to hypeDocument. You can tweak data to contain more references by defining function references in a single depth object. This doesn't eval or allow text references meaning it is safe against direct JSON injection given you pass unfiltered data in. For symbolInstance this is actually done by Hype Handlebars if disableHypeVariables isn't activated and offers calls looking like {{@symbolInstance.startTimelineNamed 'test'}}
.disableQueryHelper: true
disables the Handlebar helper for scene queries like {{$ '.myElement'}}
and document queries like {{querySelector '.test'}}
. The most likely use case is using query helpers in another helper call like {{setElementProperty ($ '.test') 'top' 200}}
, false is defaultdisableHypeVariables: true
disables Handlebar helper allowing shortcuts to current @symbolInstance, @symbolElement, @hypeDocument, @element and @elementId, false is defaultEven more default Handlebar options can be found on the Handlebars documentation. Only listing Hype specific additions here.
Name | Type | Description | |
---|---|---|---|
elms |
Nodelist
|
This is an optional nodelist to limit the update to a specific set of HTML elements |
|
options |
Object
|
The optional object containing regular and Hype specific Handlebars options, defaults to useful Hype specific options if not set |
Void
This function allows you to reset the Handlebars template for a particular element. Internally the Handlebars template you provide initially is taken from the Hype rectangle you placed it in. Then it is precompiled by Handlebars into a function and cached by Hype Handlebars. Any subsequent update runs much faster as it only executes the precombiled function. To replace the initial template this function allows you to reset the precombilation cache and define a new template. In the current implementation it also updates the corresponding elm automaticly. This might be changed in the future or at least put into a switch.
hypeDocument.setHandlebarsTemplateById ('myElement', 'I am {{name}}, nice to meet you!')
Name | Type | Description | |
---|---|---|---|
id |
String
|
The ID of the element you want to replace the template for |
|
tmpl |
String
|
The new template tstring Handlebars will use to precombile and update |
|
options |
Object
|
The optional object containing regular and Hype specific Handlebars options, defaults to useful Hype specific options if not set |
Void
This helper allows you to set some useful default values to avoid having to
updateOnHypeSceneLoad
can be either a true
or a function
. When set to true
it runs either a plain hypeDocument.updateHandlebars();
or the function you set, defaults to true and false disables itupdateOnHypeScenePrepareForDisplay
can be either a true
or a function
. When set to true
it runs either a plain hypeDocument.updateHandlebars();
or the function you set, defaults to true and false disables itselector
is the query selector string that determins if a rectangle in Hype is a Handlebars template. It defaults to '[data-handlebars]'dataSource
set the default object Hype Handlebars uses to populate a Handlebars template with. It defaults to hypeDocument.customData
Name | Type | Description | |
---|---|---|---|
key |
String
|
This is the name of the setting you want to change or initialize |
|
val |
String
|
This is the value of the setting |
Void
This helper does a backwards treewalk from the element it is started on and returns the symbolInstance if one is found. This function was originally written by Stephen Decker from Tumult Inc. When you use Hype Handlebars in conjunction with Hype Symbol Cache this function won't be defined by Hype Handlebars, but still work as it will be provided by Hype Symbol Cache offering the extended symbol functionality to Hype Handlebars as well.
Name | Type | Description | |
---|---|---|---|
element |
HTMLElement
|
The element to start the treewalk on |
Object
Returns the first found symbolInstance while tree walking or null if no symbolInstance is found
Name | Type | Description | |
---|---|---|---|
version |
String
|
Version of the extension |
Void