Grails Template / Layout Rendering & JavaScript
I recently have been working with a nice Twitter Bootstrap based theme with the intention of Grailsifying it.
Like most of these canned themes, there are plenty of excellent sample pages showing off a wide variety of UI features based on Twitter Bootstrap, jQuery, and jQuery UI. However, as static HTML pages, there's a tremendous amount of markup duplications; i.e. most of the <head> content repeats on every page, the markup for the main menu repeats, the footer repeats, etc.
After changing the pages to GSPs and fixing up links to reference URLMappings, everything was still working fine.
My next task was to abstract out <head> section stuff into the main layout. Again, all pages worked as before.
However, when I abstracted out the common menu markup into the main layout, the menu stopped rendering/behaving the way it did before. There's apparently some JavaScript handling the menu click event so that the active menu has a border-top style signifying the active menu. (See http://wrapbootstrap.com/preview/WB07233L7 for a live demo of this theme in native HTML/Twitter Bootstrap.) That border-top is no longer changed to be a thick overbar when the menu markup is encapsulated into a the layout page. Checking the rendered source, I first verified the static and generated sources are 100% identical between the layout or template version and the original static HTML version. However, when a menu is clicked, I see that the <li> for the active menu didn't have the "active" class added to when the markup is rendered via a Grails layout.
I tried moving the menu markup into a template, but got the exact same behavior.
I believe all of what I'm seeing is related to the problem discussed in this thread (including a sample test snippet):
http://grails.1312388.n4.nabble.com/...td2534214.html
The problem is, the thread discussion's solution is to fix up the JavaScript using different JQuery methods to ensure the JavaScript hooks are applied to the layout/template code at the time they are rendered.
That's fine when you're the one writing the JavaScript. However, when you're using a canned template with 1,000s of lines of JavaScript, the idea of hunting around for all the possible breakage and patching it to work with Grails is a nonstarter for me. I'd just as soon leave the copy/pasted code in place than spend two weeks fixing up some canned theme's JavaScript - JavaScript changes that could easily be stepped on when the commercial template is again updated by the theme author.
Besides, as a matter of principle, I think Grails templates and layout should not levy requirements for external code changes in order for the template/layout to work. In other words, Twitter Bootstrap code should not have to be modified to get a Grails template (or layout) to render and behave the same way the markup behaved before it was encapsulated in the template (or layout).
I'm hoping against all hope that I've missed something obvious in Grails 2.1.2 and 2.2.0RC4 template/layout configuration that will make this all work out. Otherwise, I'm stuck with massive DRY violations from all the copy/pasted HTML markup on the pages.
I warmly welcome any guidance on the subject. Thanks in advance.
--
jack
