如何将百里香片段加载到js变量中

Question

开始在Spring Boot中使用ThymeLeaf，在将简单片段加载到JS变量中时遇到一个问题。 尝试在数据表中追加一行，其中一个单元格应包含复杂的HTML部分。 像这样：

...
var cell_content = <Load thymeleaf fragment content with parameters>;
...

现在假设我有一个ThymeLeaf片段，名为：“ x :: docs-popup”，其中包括用于文档操作的Bootstrap弹出窗口，我如何加载该弹出窗口的内容，包括将参数传递到javascript变量cell_content中，以便附加它到生成的行。

换句话说，如果我使用的是php，我将执行以下操作：

 var cell_content = '<?php echo fragment_loader($document_object); ?>'

Answer 1

有趣的问题...在胸腺3中，类似以下内容对我有用：

<script th:inline="javascript">
    cell_content = '[# th:insert="~{x :: docs-popup}"/]';
</script>

但是，它不会自动转义包含中的任何内容。 因此，流浪单引号将破坏javascript。

我可能会默认将其正常包含在页面上（但默认情况下将其display: hidden ），并仅通过id进行引用即可。

Answer 2

一种简单的方法是发出对返回片段html的控制器的调用。 请参阅有关Spring @Controller中的片段包含的部分中的文档

// in your view
<script th:inline="javascript">
/*<![CDATA[*/ 
   var url = /*[[@{/docs/}]]*/;
   $.get(url + param, function(fragment) {
          $rowDocPopup = $('...'); // get selector for the cell you need
          $rowDocPopup.replaceWith(fragment);
    });
/*]]>*/
</script>

然后在控制器中：

@RequestMapping("/docs/{id}")
public String reloadDocsPopup(@PathVariable Long id, Model model){
    // do stuff and put parameter data in model 
    return "templates/x :: docs-popup";
}