Hype Handlebars

[MaxZieb (Loves Hype)]

Handlebars.js is an extension to the Mustache templating language created by Chris Wanstrath. Handlebars.js and Mustache are both logicless templating languages that keep the view and the code separated like we all know they should be.

This extension turns this …

into this

Tutorial Video:

Resources this was based on:
http://www.newthinktank.com/2015/10/learn-handlebars-one-video/

More information can be found here:
https://handlebarsjs.com/

Download:
Handlebars-Example.hype.zip

---

Documentation

There is a JSDoc based documentation of the functions at

Hype Handlebars

Code repository on GitHub

worldoptimizer/HypeHandlebars

Version-History:
1.0 Initial release under MIT
1.1 Refactored code
1.2 Added hypeDocument resolver and local helper
1.3 Added more capabilities to the hypeDocument resolver
1.4 Refactored Handlebars as instances and added local variables
1.5 Set default selector per instance and update per selector
1.6 Set default data source or route data source by function

Content Delivery Network (CDN)

Latest version can be linked into your project using the following in the head section of your project:

<script src="https://cdn.jsdelivr.net/gh/worldoptimizer/HypeHandlebars/HypeHandlebars.min.js"></script>

Optionally you can also link a SRI version or specific releases.
Read more about that on the JsDelivr (CDN) page for this extension at https://www.jsdelivr.com/package/gh/worldoptimizer/HypeHandlebars

Learn how to use the latest extension version and how to combine extensions into one file at

worldoptimizer/HypeCookBook

[MaxZieb (Loves Hype)]

↑ look at project
1.1 Refactored code

[MaxZieb (Loves Hype)]

↑ look at project
1.2 Added hypeDocument resolver and local helper

You can now access the instance specific hypeDocument API. Use only the command name for now… so hypeDocument.startTimelineNamed('test') would be {{startTimelineName 'test'}}. You can also resolve element parameter by using {{querySelector '#myID'}} or {{$ '.test'}}. The second version only searches in the current scene. This allows to run a command like {{getElementProperty ($ '.test') 'top'}}.

You can now also register local Hype document specific helper using the following:

Update: since 1.4 (truly local Handlebar instances) this changed to …

var Handlebars = hypeDocument.getHandlebars();
Handlebars.registerHelper('helloworld', function(name){ 
	return new Handlebars.SafeString('Hello World ' + name);
});

In your Hype you would then use {{helloworld 'Max'}}

[MaxZieb (Loves Hype)]

Fun fact. You can use HTML commands to hide commands that don’t output anything. This works because Handlebars has it’s own comment syntax and doesn’t care about HTML comments.

<!-- use hype functions

{{#if doAnimation}}
    {{setElementProperty ($ '.yogi') 'top' 200}}
    {{setElementProperty ($ '.yogi') 'top' 19 1}}
{{/if}}

-->

[MaxZieb (Loves Hype)]

↑ look at project
1.3 Added more capabilities to the hypeDocument resolver
1.4 Refactored Handlebars as instances and added local variables

From now on we have truly local Hype document specific Handlebars instances. Meaning full access to a custom Handlebar instance per Hype document that can be retrieved with var Handlebars = hypeDocument.getHandlebars(); if needed.

Furthermore, each Handbars rectangle has a set of local private variables now:
@element is the element the Handlebars are currently evaluated in
@elementId is the ID of the element the Handlebars are currently evaluated in
@hypeDocument is the reference to the current hypeDocument API
@symbolInstance is the reference to the current symbolInstance API (if there is one)
@symbolElement is the reference to the current symbol element (if there is one)

Calling syntax is now even more granular through better resolver
{{hypeDocument.startTimelineNamed 'test' }} starts timeline in scene but also can be written as this shorthand {{startTimelineNamed 'test' }}

{{symbolInstance.startTimelineNamed 'test' }} starts timeline in symbol

1.4 is also compatible with Hype Symbol Cache so you can combine the two and write persistent symbol functions and call them in your Handlebars.

[MaxZieb (Loves Hype)]

↑ look at project
1.5 Set default selector per instance and update per selector
1.6 Set default data source or route data source by function

This update was about local settings, some refactoring, adding a ton of flexibility and adding advanced options for data sources and target selecting. I also moved the code to Github and did a release. So, from now on you can use the latest release through the jsdelivr CDN.

Update: I forgot to update the example file on the server (download in first post). This has now been done. Also, I will make a more appealing example. This was more of a “unit” test.

[MaxZieb (Loves Hype)]

Here is an extensive library of helper if you need any of them:

helpers/handlebars-helpers/blob/master/README.md

[MaxZieb (Loves Hype)]

↑ look at project
Added a JSDoc based documentation of the functions

Hype Handlebars