How do I get Thymeleaf to render this section of BlueImp template code?

Question

I have some x-tmpl code from the BlueImp library to display on a Thymeleaf page. How can I have Thymeleaf render this? Unless I'm doing it wrong, it seems that CDATA and th:inline doesn't work here.

    <!-- The template to display files available for upload -->
    <script id="template-upload" type="text/x-tmpl">
            {% for (var i=0, file; file=o.files[i]; i++) { %}
                <tr class="template-upload fade">
                    <td>
                        <span class="preview"></span>
                    </td>
                    <td>
                        <p class="name">{%=file.name%}</p>
                        <strong class="color--error field--error"></strong>
                    </td>
                    <td>
                        <p class="size">Processing...</p>
                        <div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"><div class="progress-bar progress-bar-success" style="width:0%;"></div></div>
                    </td>
                    <td>
                        {% if (!i && !o.options.autoUpload) { %}
                            <button type="submit" class="btn btn--success btn--lg start" id="uploadPaystub" name="_eventId_uploadStub" style="padding: 2px;">
                                <span class="btn__text type--uppercase">
                                    Start
                                </span>
                            </button>
                        {% } %}
                        {% if (!i) { %}
                            <button class="btn btn--warning btn--lg type--uppercase cancel">
                                <span class="btn__text">
                                    Cancel
                                </span>
                            </button>
                        {% } %}
                    </td>
                </tr>
            {% } %}
    </script>

To paraphrase this external link, it seems like one solution was to just use Velocity for the block and use utext in Thymeleaf to display it. Is there a better way than resorting to another library altogether?

Answer 1

Hmm, that is a tricky one... I agree with the original author (it appears impossible to put that javascript template directly in a thymeleaf template). That being said, you don't need velocity for this case. I would just put the contents of the javascript in the src/main/resources/javascript/upload.js and then add the contents to the model (no need to parse it with velocity -- just read it directly from that file). I have my own utility, but it should be easy to get working:

// Controller
model.put("upload", Utilities.resourceToString("javascript/upload.js"));

// Thymeleaf template
<script id="template-upload" type="text/x-tmpl" th:utext="${upload}" />