Hype Handlebars (master)

# 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.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

Returns

Object

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

# 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

# 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

# hypeDocument.updateHandlebars(options, elms)

Update all handlebars in the scene hypeDocument.updateHandlebars();

Parameters

# 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

# 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

# HypeHandlebars()