jQuery tmpl and JSP code not playing nicely

Question

I've been using the jQuery tmpl library for some projects and really liking it.

I'm not using it on a small project that needs to be in JSP, and things got strange. It is not working fully.

<script id="servicesRow" type="text/x-jquery-tmpl">
    <tr id="id_${id}">
        <td>${name2}<br />${id}</td>
        <td>${supported_roles}</td>
        <td><button class="edit">Edit</button></td>
        <td><button class="delete">Delete</button></td>
        <td><a href="#">Show clients</a></td>
    </tr>
</script>

I was trying to understand why no data was showing up. Turns out some kind of parsing is happening of text in the page that looks like ${foo}. So when I view source on my page all those elements have been replaced, like this:

<script id="servicesRow" type="text/x-jquery-tmpl">
    <tr id="id_">
        <td><br /></td>
        <td></td>
        <td><button class="edit">Edit</button></td>
        <td><button class="delete">Delete</button></td>
        <td><a href="#">Show clients</a></td>
    </tr>
</script>

Which is still usable as a template, but then jQuery tmpl can't do its job. I get lots of empty rows.

The syntax matches some documentation I've found for JSTL. But I've not, that I can tell, installed that. I'm developing on stock, current Tomcat on Windows 7 and building up an app in my webapps/ folder from scratch. I've not, that I can tell, enabled anything like this, and I'm surprised that bare ${} is getting parsed (as opposed to things more like <%= %>, which would be more common as from PHP or ASP and similar.

So my question: how do I turn off this parsing behavior for my jQuery tmpl templates? Globally, locally to the individual JSP, or escape it (I've tried extra braces, I've tried backslashes, I've tried various quotes). I think Ideally there would be something like:

<foo:stopParsingMyDollarSignsAndBracesPlease>
<script id="servicesRow" type="text/x-jquery-tmpl">
    <tr id="id_${id}">
        <td>${name2}<br />${id}</td>
        <td>${supported_roles}</td>
        <td><button class="edit">Edit</button></td>
        <td><button class="delete">Delete</button></td>
        <td><a href="#">Show clients</a></td>
    </tr>
</script>
</foo:stopParsingMyDollarSignsAndBracesPlease>

Any help or ideas are appreciated. Thanks!

Answer 1

The ${} notation is Expression Language. You can turn it off on a per-JSP basis by

<%@page isELIgnored="true" %>

Or on an application-wide basis by the following in web.xml:

<jsp-config>
    <el-ignored>true</el-ignored>
</jsp-config>

Or if you actually would like to use EL elsewhere in the JSP, then you just have to escape the ones in jQuery template by \. You'd really like to avoid the old fashioned scriptlets.

<tr id="id_\${id}">

Or you could just drop all that JS code in its own JS file (if supported by jQuery tmpl).

Answer 2

Use {{= variable_name}} instead of ${variable_name} in jQuery templates.

https://github.com/jquery/jquery-tmpl/issues/56

Answer 3

Turn off EL is not advisable,when the jsp page have other el ,and how do you deal with it, you can do it like this:

<script id="servicesRow" type="text/x-jquery-tmpl">
<tr id="id_{{= id}}">
    <td>{{= name2}}<br />${id}</td>
    <td>{{= otherInfo}}</td>
    <td><button class="edit">Edit</button></td>
    <td><button class="delete">Delete</button></td>
    <td><a href="#">Show clients</a></td>
</tr>

note:there is a space in the El,