Question

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

domain.xml

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

$('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.
  });

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

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

问题是Thymeleaf在这种情况下没有内联任何内容。嵌入服务器端变量或命令对象可以很好地与Thymeleaf一起工作，但我不能使它适用于javascript。我使用Spring Boot 1.5.4，Thymeleaf 3.0.2

Answer 1

th:inline="javascript"仅在您的脚本为内联时才有效，即<script>和</script>之间的HTML模板。

如果您要在其中评估单独的javascript文件和Thymeleaf表达式，则需要使用JAVASCRIPT模板模式分别通过Thymeleaf处理该js文件。

Answer 2

$('input.autocomplete').autocomplete({
    data: [($ {
        companies
    })], // use  '(', ')'
    limit: 20,
    onAutocomplete: function(val) {},
    minLength: 1
});

试试上面的代码。我也经历过这一点。

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

2 个答案: