Thymeleaf webflux：只允許將一個數據驅動變量指定為模型屬性，但至少已識別出兩個

Question

我正在嘗試創建一個儀表板應用程序，其中多個小部件通過 SSE 獲取更新。 我的儀表板控制器看起來像：

public class DashboardController
{
    private WidgetService widgetService;

    public DashboardController(WidgetService widgetService)
    {
        this.widgetService = widgetService;
    }

    @GetMapping("/")
    public String index(final Model model)
    {
        for(WidgetInterface<?> widget : widgetService.getAll()) {
            model.addAttribute("widget-data-driver-" + widget.getIdentifier(),
                    new ReactiveDataDriverContextVariable(widget.getInitialData(), 100));
        }
        model.addAttribute("widgets", widgetService.getAll());
        return "index";
    }
}

還有我的小部件接口：

public interface WidgetInterface<T>
{
    public String getIdentifier();
    public String getTitle();
    public String getStreamEndpoint();
    public Flux<T> getInitialData();
    public Map<String, String> getColumns();
    public String getThymeLeafFraction();
    public Date getLastItemDate();
    public Flux<T> getItemsUpdatedSince(Date date);
}

一個小部件（來自 WidgetService）一切正常。 我正在嘗試將每個小部件的ReactiveDataDriverContextVariable傳遞給 Thymeleaf。 但我收到以下錯誤：

org.thymeleaf.exceptions.TemplateProcessingException: Only one data-driver variable is allowed to be specified as a model attribute, but at least two have been identified: 'widget-data-driver-nufeed' and 'widget-data-driver-weatherapi'

我有兩個活動小部件，一個是 RSS 提要，一個是實現天氣 api。 我理解錯誤，但是如何為多個小部件設置反應變量？

更新我的百里香模板

<!DOCTYPE html>  
<html xmlns:th="http://www.w3.org/1999/xhtml" th:with="version=7">  
<head>  
 <meta charset="utf-8">  
 <meta http-equiv="X-UA-Compatible" content="IE=edge">  
 <meta name="viewport" content="width=device-width, initial-scale=1">  
 <link rel="icon" type="image/png" href="images/logo.png" />  
 <title>Dashboard</title>  
 <link rel="stylesheet" th:href="'build/vendor.css?v=' + ${version}" />  
 <link rel="stylesheet" th:href="'build/app.css?v=' + ${version}" />  
 <link rel="preconnect" href="https://fonts.googleapis.com">  
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>  
 <link href="https://fonts.googleapis.com/css2?family=Space+Mono&display=swap" rel="stylesheet">  
</head>  
<body>  
 <div class="container-fluid" id="content">  
 <div class="container" id="content-body">  
 <div class="logo-header">  
 <img src="images/logo.png" align="left">  
 <h2>Dashboard <a href="/logout" class="logout"><span>(logout)</span></a></h2>  
 </div>  
 <div class="row" id="widgets">  
 <div class="col-xl-4 col-lg-6 col-md-6 col-sm-12 col-12 card-container" th:each="widget: ${widgets}" th:data-identifier="@{${widget.identifier}}">  
 <div class="card p-3 mb-2" th:classappend="@{${widget.getCardCssClass()}}">  
 <div class="card-header" th:if="${widget.title != null}">  
 <div class="widget-icon-header"><img class="widget-icon" th:src="${widget.icon}" /></div>  
 <div class="float-left" th:text="${widget.title}"></div>  
 <div class="float-right reload" th:if="${widget.hasUpdate}" th:data-ref="''+@{${widget.identifier}}+''"><img class="reload-img" src="images/reload.png"></div>  
 </div> <div class="card-body" th:id="''+@{${widget.identifier}}+'-content'">  
 <table th:replace="__${widget.getThymeLeafFraction()}__"></table>  
 </div> </div> </div> </div> </div> <div class="row fullscreen">  
 <a href="javascript:openFullscreen()" style="margin: 0px auto; color:#000">Fullscreen</a>  
 </div> </div>  
 <script th:src="'build/vendor.js?v=' + ${version}"></script>  
 <script th:src="'build/app.js?v=' + ${version}"></script>  
</body>  
</html>

它包括一個百里香葉部分，具體取決於小部件：

<table th:id="@{${widget.identifier}}" class="table" th:classappend="@{${widget.getCardCssClass()}}">  
 <thead> <tr> <th data-th-each="column : ${widget.getColumns()}"  
  th:style="'width:'+@{${widget.getColumnWidth().get(column.key)}}+';'"  
  th:text="${column.value}"></th>  
 </tr> </thead> <tbody> <tr class="result" data-th-each="item : ${#vars.getVariable('widget-data-driver-__${widget.identifier}__')}" th:data-id="@{${item.id}}">  
 <td th:text="''+${item.driver}"></td>  
 <td th:text="''+${item.points}"></td>  
 </tr> </tbody></table>

根據 Angelos 評論更新答案

我嘗試將 DashboardController.index 方法替換為：

GetMapping("/")
public String index(final Model model, Authentication authentication)
{
     setAuthentication(authentication);
     Flux<WidgetInterface<?>> flux = Flux.just(widgetService.getAll().toArray(new WidgetInterface<?>[0]));
     model.addAttribute("widgets", new ReactiveDataDriverContextVariable(flux));
     return "index";
}

這是有效的，除了現在我無法在 thymeleaf 中迭代我的 widget.getInitialData() （這是如上所述的分數文件）：

<div data-th-each="item : ${widget.getInitialData()}"  th:data-id="@{${item.id}}" id="art">
    <a th:data-lightbox="'' + ${widget.identifier}" th:href="${item.image}">
        <img th:src="'https://images.weserv.nl/?url=' + ${item.image} + '&w=200&h=200&fit=cover&a=top'" th:data-lightbox="'' + ${widget.identifier}"
             class="rounded d-block user-select-none" style="max-height:100px;max-width:150px;margin-right:10px;" align="left" />
    </a>
    <h5 th:text="${item.description}" class="card-title"></h5>
</div>

這給出了這個錯誤：

org.thymeleaf.exceptions.TemplateProcessingException: Exception evaluating SpringEL expression: "item.id" (template: "art_fraction" - line 1, col 56)
    at org.thymeleaf.spring5.expression.SPELVariableExpressionEvaluator.evaluate(SPELVariableExpressionEvaluator.java:292) ~[thymeleaf-spring5-3.0.15.RELEASE.jar:3.0.15.RELEASE]

Answer 1

我會讓你的模板代碼更簡單一些。 我會這樣改變它：

JAVA側

GetMapping("/")
public String index(final Model model, Authentication authentication)
{
     setAuthentication(authentication);
     Flux<WidgetInterface<?>> flux = Flux.just(widgetService.getAll().toArray(new WidgetInterface<?>[0]));
     model.addAttribute("widgets", new ReactiveDataDriverContextVariable(flux));
     return "index";
}

模板側：

        <table class="table table-striped">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Image</th>
                    <th>Identifier</th>
                </tr>
            </thead>
            <tbody>
                <tr data-th-each="myWidget : ${widgets}">
                    <td>[[${myWidget.id}]]</td>
                    <td>[[${myWidget.image}]]</td>
                    <td>[[${myWidget.identifier}]]</td>
                </tr>
            </tbody>
        </table>

顯然這是一個示例......根據您的情況調整它

安傑洛

Thymeleaf webflux：只允許將一個數據驅動變量指定為模型屬性，但至少已識別出兩個

問題描述

更新我的百里香模板

根據 Angelos 評論更新答案

1 個解決方案

解決方案1
0 2022-07-19 17:11:06

Thymeleaf webflux：只允許將一個數據驅動變量指定為模型屬性，但至少已識別出兩個

問題描述

更新我的百里香模板

根據 Angelos 評論更新答案

1 個解決方案

解決方案1 0 2022-07-19 17:11:06

解決方案1
0 2022-07-19 17:11:06