Thymeleaf3.0 and processing javascript files

classic Classic list List threaded Threaded
3 messages Options
Reply | Threaded
Open this post in threaded view
|

Thymeleaf3.0 and processing javascript files

jlumme
Hi,

In our Spring mvc project we have a need to do some pre-processing on external javascript files, and since thymeleaf3.0 supports that I am trying to configure it appropriately.
For some reason I cannot seem to get Thymeleaf to process my javascript file.

In my mvc-config.xml, I have added 2 templateResolvers:
<bean id="templateResolver" class="org.thymeleaf.spring4.templateresolver.SpringResourceTemplateResolver">
  <property name="prefix" value="/WEB-INF/view/" />
  <property name="templateMode" value="HTML" />
  <property name="suffix" value=".html" />
</bean>

<bean id="templateResolverJS" class="org.thymeleaf.spring4.templateresolver.SpringResourceTemplateResolver">
  <property name="prefix" value="/resources/js/" />
  <property name="templateMode" value="JAVASCRIPT" />
  <property name="suffix" value=".js" />
</bean>

I configured templateEngine:
<bean id="templateEngine" class="org.thymeleaf.spring4.SpringTemplateEngine">
  <property name="templateResolvers">
    <set>
      <ref bean="templateResolver" />
      <ref bean="templateResolverJS" />
    </set>
  </property>
</bean>

And finally view resolver:
<bean class="org.thymeleaf.spring4.view.ThymeleafViewResolver">
  <property name="templateEngine" ref="templateEngine" />
  <property name="characterEncoding" value="UTF-8" />
</bean>

In my HTML, I reference to the desired js file normally:
<script src="resources/js/test.js" charset="UTF-8" ></script>

the only function in the javascript file is like this:
function toggleSideMenu() {
  var variable = /*[[${thymeleafVariable}]]*/ '123456';
  var msg = "variable val:" + variable;
  alert(msg);
}

The alert is shown, but the variable thymeleafVariable is not replaced, and the alert just displays "variable val: 123456".
I have added the thymeleafVariable in my controller:
output.addAttribute("thymeleafVariable", "TEST");

The variable should be ok since if I put the code directly as th:inline="javascript" element in html, it will be appropriately replaced

Have I misunderstood the capabilities of thymeleaf javascript processing ? Are we still somehow limited to only inline javascript processing ?
Thanks for your suggestions!
Reply | Threaded
Open this post in threaded view
|

Re: Thymeleaf3.0 and processing javascript files

danielfernandez
Administrator
I suppose we are talking about Thymeleaf 2.1 here. ViewResolvers in 2.1 do not check the existence of a resource before considering themselves as having the responsibility to resolve the resources. So the unless there is something in the ViewResolver configuration that tells to it which specific resources it should be resolving, it will be trying to resolve everything.

The problem is, you seem to be trying to use your "prefix" as if it were a matcher, and it isn't, it is just a prefix that is added to the view name before trying to resolve it. And given both your resolvers are configured to resolve everything, the first one will try to resolve "/WEB-INF/view/resources/js/test.js.html" and, given it does not exist, will just return nothing. If you set Thymeleaf's log to DEBUG you should see all this happening.

If you want to specifically select which resources can be resolved by each ViewResolver, you should use their "viewNames" property, which allows for patterns to be defined.

Regards,
Daniel.
Reply | Threaded
Open this post in threaded view
|

Re: Thymeleaf3.0 and processing javascript files

jlumme
Hi Daniel,

Thank you for your reply.
Actually, I was trying to use Thymeleaf3 here, as I understood JS processing was not supported except in inline statements inside html.

Nevertheless, your suggestion led me to the right path. Indeed by adding viewNames element to the resolver fixed this.
I created 2 resolvers, one for html (using excludedViewNames for *.js) and one for JS (using viewNames *.js) and this made it work as I wanted.