Hello!
for a custom component I need a handlebars helper. Let's say, I have this code:
Handlebars.registerHelper('greeting', function() {
return "Hello World"
});
How do I get this to work in Adapt framework?
handlebars helper
Re: handlebars helper
How do I get this to work in Adapt framework?
Do you mean where should you put this code in order for it to be included in the Framework - or how would you run it when needed?
Re: handlebars helper
Hi Matt,
sorry: I don't know, where to put the code. I had a look at src/core/js/helpers.js to figure out how it works, but without success. The code structure follows the recommendation described here (https://github.com/adaptlearning/adapt_framework/wiki/Developing-plugins) I'd like to put the code in its own file (e.g. adapt-mycomponent/libraries/helpers.js) but have no idea how and where to load it.
Re: handlebars helper
If you are developing a plugin you can certainly include the code in that plugin. You can see an example of that in the resources extension.
no reason why you couldn't include it in a component either, I don't have an example of that to hand but it wouldn't be significantly different.
If you aren't producing a plugin then an alternative would be to include it in one of your theme's .js files.
Re: handlebars helper
thank you Matt, it works.
For all later readers with the same problem:
adapt-myComponent/js/helpers.js:
define([
'handlebars',
'core/js/adapt'
], function(Handlebars, Adapt) {
var helpers = {
mytest: function() {
return 'Hello World';
}
}
for (var name in helpers) {
if (helpers.hasOwnProperty(name)) {
Handlebars.registerHelper(name, helpers[name]);
}
}
});
adapt-myComponent/js/adapt-myComponent.js:
define([
'core/js/adapt',
'./myComponentView',
'./myComponentModel',
'./helpers'
], function(Adapt, MyComponentView, MyComponentModel, Helpers) {
return Adapt.register("mycomponent", {
view: MyComponentView,
model: MyComponentModel
});
});
adapt-myComponent/templates/myComponent.hbs:
div class="myComponent-inner component-inner" role="region" aria-label="{{_globals._components._myComponent.ariaRegion}}">
{{> component this}}
<div class="mycomponent-widget component-widget">
{{#mytest}}
</div>
{{!-- This ensures that the standard question component buttons are automatically rendered into your view --}}
<div class="buttons"></div>
</div>
Re: handlebars helper
The code:
for (var name in helpers) {
if (helpers.hasOwnProperty(name)) {
Handlebars.registerHelper(name, helpers[name]);
}
}
Is overkill if you've only got the one helper to register. This would work just as well:
Handlebars.registerHelper('mytest', function() {
return "Hello World"
});