javascript - 如何使用 Thymeleaf 将 JSON 对象内联到 javascript 中

Question

我想在我的 Thymeleaf 模板中使用自动完成 jquery 组件。 Materializecss前端框架的自动完成功能如下所示:

$('input.autocomplete').autocomplete({
    data: {
      "Apple": null,
      "Microsoft": null,
      "Google": 'http://placehold.it/250x250'
    },
    limit: 20, // The max amount of results that can be shown at once. Default: Infinity.
    onAutocomplete: function(val) {
      // Callback function when value is autcompleted.
    },
    minLength: 1, // The minimum length of the input for the autocomplete to start. Default: 1.
  });

如您所见，我需要一个包含元素列表的数据对象。我想从服务器端嵌入这个变量，因为这个列表是动态的。作为Thymeleaf documentation说

<script type="text/javascript" th:inline="javascript" th:src="@{/js/example.js}"></script>

根据文档，以下示例应该有效:

$('input.autocomplete').autocomplete({
        data: [[${companies}]],
        limit: 20, // The max amount of results that can be shown at once. Default: Infinity.
        onAutocomplete: function(val) {
          // Callback function when value is autcompleted.
        },
        minLength: 1, // The minimum length of the input for the autocomplete to start. Default: 1.
      });

问题是 Thymeleaf 在这种情况下不会内联任何内容。嵌入服务器端变量或命令对象可以在 Thymeleaf 中正常工作，但我无法使其适用于 javascript。我使用Spring Boot 1.5.4，Thymeleaf 3.0.2

Answer 1

th:inline="javascript"仅当您的脚本是内联的(即在 <script> 之间的 HTML 模板中)时才有效。和</script> .

如果您有一个单独的 javascript 文件和想要在其中计算的 Thymeleaf 表达式，则需要使用 JAVASCRIPT 模板模式通过 Thymeleaf 单独处理该 js 文件。