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.
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:
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'}}
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.
↑ 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.
↑ 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.
