使用ui：用b：carousel重複一遍？

我與JSF2.2，Bootsfaces 0.9.1，工作Primefaces 6.0，JEE7並結合與MySQL 5.7數據庫的Hibernate 5.2。

我有什麼：

我有其中有一組圖像的模型。該集合包含我自定義Image類的實例，該類爲標題，描述和文件名保存圖像的值。

圖像存儲在文件系統，我得到了用於存儲模型的MySQL數據庫。我試圖在我的web應用程序的視圖上顯示圖像，一切正常。我還從bootsfaces中顯示了一些帶有b：carousel標籤的圖像，everthing像我期望的那樣工作。

我試圖這樣做：

下一步我想是用來顯示一組圖像的不同尺寸。以下代碼是我試圖認識到這一點：

<b:carousel id="carousel" style="width: 800px; height: 400px;"> 
    <ui:repeat value="#{modelDetailBean.modelImages}" var="img"> 
     <b:carouselItem> 
       <b:image value="#{modelDetailBean.getImage(img)}"/> 
     </b:carouselItem> 
    </ui:repeat> 
</b:carousel>

我認識到沒有圖像顯示在我的傳送帶上。然後，我至少添加了1個固定裝置，以查看它是否正常工作，並確認該組中的所有圖像都存在於旋轉木馬中，但旋轉木馬沒有正確記錄它們。

我的主要問題：

是否可以使用UI：repeat標籤填充旋轉木馬？

如果可能的話：我該怎麼做？我在這裏做錯了什麼？

如果不是：我有哪些替代方法必須通過JSF實現並且沒有大量的JavaScript等？

來源

2016-08-24 mweber

基本上，b:carousel組件需要靜態項目，但ui:repeat動態呈現它們。解決方案是將生成的b:carouselItems轉換爲早期的JSF生命週期階段。

JSF分階段執行其生命週期，並且負責呈現響應的是最後一個（在下面的鏈接中已經很好地解釋了它）。這裏的關鍵是你仍然可以使用JSTL，它是一個標記處理程序，而不是一個組件，並在視圖構建時執行。所以，基本上，免去您ui:repeat通過c:forEach應該解決您的問題：

<b:carousel id="carousel" style="width: 800px; height: 400px;"> 
    <c:forEach items="#{modelDetailBean.modelImages}" var="img"> 
     <b:carouselItem> 
       <b:image value="#{modelDetailBean.getImage(img)}"/> 
     </b:carouselItem> 
    </c:forEach> 
</b:carousel>

這招用在舊的鑽嘴魚科JSF版本（2.1.18和以前的），使開發商陷入麻煩與PARTIAL_STATE_SAVING，但現在不是了。無論如何，在評估組件之前，始終牢記JSTL的行爲。通過以下鏈接：

僅使用JSTL標籤來控制JSF組件樹的構建流程。使用 JSF UI組件來控制HTML輸出生成的流程。不要將迭代JSF組件的var綁定到JSTL標籤屬性。不依賴JSTL標籤屬性中的JSF事件。

或者，忘掉了b:carousel組件，你可以使用JSF作爲一個單純的HTML生成，並生成所需的HTML使用普通引導顯示旋轉木馬，因爲它是在解釋自己做吧節的docs。

參見：

來源

2016-08-24 12:59:15

很好的解釋，那沒有的伎倆！不幸的是我遇到了另一個問題。我會開一個關於它的新問題。 – mweber

更重要的是，在'b：carousel'和'b：courouselItems'之間放置'ui：repeat'會修改項目的HTML ID。我沒有檢查客戶端小部件是否支持修改的id，但許多小部件不支持。更糟糕的是，JSF樹看起來與BootsFaces期望的不同。它看到一個'ui：repeat'。這個組件被無聲地忽略。 'b：carouselItem'是'ui：repeat'的孩子 - 或者'b：carousel'的孫子。我們沒有教BootsFaces關心孫子。另外，'ui：repeat'的孩子在渲染階段渲染 - 到BootsFaces遲到。 –

@Xtreme Biker：也許你會想要重新解釋你答案的第一句話。其餘的答案是正確的。 'b：carousel'需要靜態內容，因此解決方案是如何修改JSF樹 - 這就是JSTL標籤所做的。 –

使用ui：用b：carousel重複一遍？

回答

相關問題