Question

我有一些来自BlueImp库的x-tmpl代码，可以在Thymeleaf页面上显示。我怎样才能让Thymeleaf呈现这个？除非我做错了，否则CDATA和 <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>似乎无效。

utext

要解释this external link，似乎只有一个解决方案就是使用Velocity作为块并在Thymeleaf中使用{{1}}来显示它。有没有比完全诉诸另一个图书馆更好的方法？

Answer 1

嗯，这是一个棘手的问题...我同意原作者（似乎不可能将javascript模板直接放在百里香模板中）。话虽如此，在这种情况下你不需要速度。我只是将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[ ]]>部分允许百万富翁忽略无效字符。

<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模板代码的这一部分？

4 个答案: