如何让 Thymeleaf 渲染这部分 BlueImp 模板代码？

Question

我有一些来自 BlueImp 库的 x-tmpl 代码可以显示在 Thymeleaf 页面上。我怎样才能让 Thymeleaf 渲染这个？除非我做错了，否则 CDATA 和 th:inline 似乎在这里不起作用。

    <!-- 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>

换句话说 this external link，似乎一种解决方案是只对块使用速度并在 Thymeleaf 中使用 utext 来显示它。有没有比完全求助于另一个图书馆更好的方法？

Answer 1

嗯，这是一个棘手的问题...我同意原作者的观点（似乎不可能将 javascript 模板直接放在 thymeleaf 模板中）。话虽这么说，在这种情况下您不需要速度。我只是将 javascript 的内容放在 src/main/resources/javascript/upload.js 中，然后将内容添加到模型中（无需快速解析它——只需直接从该文件中读取它）。我有自己的工具，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}" />

Answer 2

我使用 ajax 调用 javascript 文件完成了此操作。在 ajax 调用后，我对响应进行了编码以避免 js 执行。编码后只需插入任何元素。

Answer 3

这个有用吗？ blueimp 模板似乎忽略了 html 注释，<![CDATA[ ]]> 部分允许 thymeleaf 忽略无效字符。

<script id="template-upload" type="text/x-tmpl">
<!-- <![CDATA[ -->
    {% 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_uploadPaystub" 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>

Answer 4

<script id="template-upload" type="text/x-tmpl">
/*<![CDATA[*/
    {% 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_uploadPaystub" 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>

如何让 Thymeleaf 渲染这部分 BlueImp 模板代码？

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

blueimp

thymeleaf