Back to Top

Hype Handlebars master

Wrapper to connects Handlebars to your Hype document (rectangles/DIV's)

hypeDocument.getHandlebars()

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();

Returns

Object

Returns the Handlebars API for the current Hype document

hypeDocument.updateHandlebars(options, elms)

Update all handlebars in the scene

hypeDocument.updateHandlebars();

Parameters

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

Returns

Void

hypeDocument.updateHandlebarsByNodelist(elms, options)

Convenience wrapper to hypeDocument.updateHandlebars method putting the nodelist argument first to avoid passing a null

var elms = document.querySelector('.myHandleBars');
hypeDocument.updateHandlebarsByNodelist(elms);

Parameters

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

Returns

Void

hypeDocument.updateHandlebarsByElement(elms, options)

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 default
  • disableHypeVariables: true disables Handlebar helper allowing shortcuts to current @symbolInstance, @symbolElement, @hypeDocument, @element and @elementId, false is default

Even more default Handlebar options can be found on the Handlebars documentation. Only listing Hype specific additions here.

Parameters

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

Returns

Void

hypeDocument.setHandlebarsTemplateById(id, tmpl, options)

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!')

Parameters

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

Returns

Void

hypeDocument.setHandlebarsDefaultByKey(key, val)

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 it
  • updateOnHypeScenePrepareForDisplay 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 it
  • selector 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

Parameters

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

Returns

Void

hypeDocument.getSymbolInstanceForElement(element)

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.

Parameters

Name Type Description
element HTMLElement

The element to start the treewalk on

Returns

Object

Returns the first found symbolInstance while tree walking or null if no symbolInstance is found

HypeHandlebars()

Properties

Name Type Description
version String

Version of the extension

Returns

Void