Ask Questions and Find Answers
Important:
Ask is now read-only. You can review any existing questions and answers, but not add anything new.
But - don't panic! While ask is no more, we've replaced it with discuss - the new Liferay Discussion Forum! Read more here here or just visit the site here:
discuss.liferay.com
RE: Liferay 7 using Handlebars for HTML Templates?
Hi,
I tryed using Handlebars in my MVC Portlet and couldn't manage to do it. I understand that the first reasonable advice would be to simply use a Soy-Portlet but I would like to know if there is a way to use templates in the JSPs of MVC portlets.
If someone wants to try reconstruct what might went wrong I will provide what I did.
Adding the handlebar scripts over the Component property just gets me a javascript ReferenceError that "Handlebars is not Defined"
"com.liferay.portlet.header-portlet-javascript=/js/handlebars.runtime-v4.0.12.js"
Adding it directly in the jsp also gives me that error.
I created the "template.js" with handlebars installed through npm with:
"handlebars [*.handlebars files with already tested handlebar templates] -f template.js".
I put the template.js and handlebar script in a js directory in the META-INF/resources/
at the end I wrote a simple script that calls the
Handlebars.templates.nameOfTemplate(context);
the context is also tested but nontheless the portlet never gets to that part of the code since the Handlebars isn't defined either way.
I would keep the soy-portlet option as the last fallback if possible and would prefer it to stay a mvc portlet, but I wanted to aks here if someone had the same problem.
I don't know if it might be important but I am using gradle as a build management tool if there is maybe a way to add the dependency to use handlebars. I googled if there is a way to do it but no luck with this one either.
If needed I will add a link to a git repo with what I did to make it easier to reconstruct the problem.
What version are you using Matej? There has been a lot of work going into Liferay's AMD loader, and I'm wondering if maybe you're hitting an issue from an older version.
David H Nebinger:What version are you using Matej? There has been a lot of work going into Liferay's AMD loader, and I'm wondering if maybe you're hitting an issue from an older version.
Liferay 7 ga7
it was the latest version like a month ago AFAIK.
"liferay-ce-portal-7.0-ga7"
To make finding the solution a bit easier I created this template workspace to reconstruct what I have done so far:
https://github.com/MatejDragicevic/playground/tree/master/modules/first-mvc-portlet
it is literally a workspace created with blade with 2 commits to add the handlebars and before the commit to add the handlebars everything works fine
So a quick glance at things, I think it is an AMD loader issue, one that has been fixed in 7.1.
Would it be possible for you to try again under 7.1 and see if it works for you there?
David H Nebinger:So a quick glance at things, I think it is an AMD loader issue, one that has been fixed in 7.1.
Would it be possible for you to try again under 7.1 and see if it works for you there?
I will try it asap.
I just installed the liferay 7.1 tomcat bundle with the linked github
mvc portlet and now there are 2 errors:
Uncaught ReferenceError:
Handlebars is not defined
and
Error in event handler for (unknown): TypeError: l.clipboard.setClipboard is not a function
7.1.0 CE GA1, I don't know if there is a different one.
Hey Matej!
The scripts you're pushing to the portlet header all depend on each
other, so you need to make sure they're loaded in the right order.
Since test.js depends on template.js which
in turn depends on handlebars-runtime.js, you should set
them properly in your Portlet properties:
"com.liferay.portlet.header-portlet-javascript=/js/handlebars.runtime-v4.0.12.js", "com.liferay.portlet.header-portlet-javascript=/js/template.js", "com.liferay.portlet.header-portlet-javascript=/js/test.js",
Hope that helps!
Chema Balsas:Hey Matej!
The scripts you're pushing to the portlet header all depend on each other, so you need to make sure they're loaded in the right order. Since
test.jsdepends ontemplate.jswhich in turn depends onhandlebars-runtime.js, you should set them properly in your Portlet properties:
"com.liferay.portlet.header-portlet-javascript=/js/handlebars.runtime-v4.0.12.js", "com.liferay.portlet.header-portlet-javascript=/js/template.js", "com.liferay.portlet.header-portlet-javascript=/js/test.js",
Hope that helps!
Hi Chema,
I just tryed the adviced action in the linked github repo with the module above and it didn't work on liferay 7.0. It still throws Handlebars is not defined.
Should this be the solution on liferay 7.1 maybe?
Hey Matej, this is needed both in 7.1 and 7.0. If you do that, your app should work in 7.1 with no further issues (I tried it myself and everything seemed fine).
In 7.0, you should be hiding the AMD loader. Take a look at the Using External Libraries tutorial
The easiest way, as explained in the tutorial is:
With the release of Liferay Portal CE 7.0 GA4 and Liferay Digital Enterprise 7.0 SP2 (Fix Pack 8), it will be possible to hide the Liferay AMD Loader through Liferay Portal’s System Settings. Open the Control Panel, navigate to Configuration → System Settings, and click JavaScript Loader under the Foundation tab. Finally, uncheck the expose global option.Hope that helps!
Chema Balsas:Hey Matej, this is needed both in 7.1 and 7.0. If you do that, your app should work in 7.1 with no further issues (I tried it myself and everything seemed fine).
In 7.0, you should be hiding the AMD loader. Take a look at the Using External Libraries tutorial
The easiest way, as explained in the tutorial is:
With the release of Liferay Portal CE 7.0 GA4 and Liferay Digital Enterprise 7.0 SP2 (Fix Pack 8), it will be possible to hide the Liferay AMD Loader through Liferay Portal’s System Settings. Open the Control Panel, navigate to Configuration → System Settings, and click JavaScript Loader under the Foundation tab. Finally, uncheck the expose global option.Hope that helps!
Hi Chema,
that is it, the exposed global option was the problem.
I adjusted it in the repo with some lighter changes and it works.
Thank you so much
Powered by Liferay™