如何將百里香片段加載到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";
}