html - 动态创建 HTML 和 CSS 元素

Question

我使用 JSF 和 JPA 开发了这个市场 java web 应用程序用于存储。我决定使用 Zurb - Foundation 4 css 前端框架来让它看起来更好看。不幸的是，我仍然是一个没有经验的前端设计师。我的问题是:如何根据从持久性单元检索到的数据在 HTML 和 CSS 中动态创建元素？

为了澄清这一点，我将添加一些关于我当前的 xhtml 代码和 Zurb - Foundation 4 的一部分的代码 store template ，我想动态显示结果。

xhtml:

  <div id="Wrapper"> 
       <div id="content">
   <h:form>
      <h:dataTable var="_items"
                   value="#{itemManager.item}"
                   border="1"
                   binding="#{itemManager.table}">
         <h:column>
            <f:facet name="header">Item</f:facet>
            #{_item.name}
         </h:column>
         <h:column>
            <f:facet name="header">Available Units</f:facet>
            #{_item.stock}
         </h:column>
         <h:column>
            <f:facet name="header">Price</f:facet>
            #{_item.price}
         </h:column>
         <h:column>
            <f:facet name="header">Select</f:facet>
            <h:commandButton value="Select"
                             action="#{itemManager.selectItem}"/>
         </h:column>
      </h:dataTable>
   </h:form>

Zurb - 基础 4:

<div class="large-8 columns">
          <div class="row">

            <div class="large-4 small-6 columns">
              <img src="http://placehold.it/1000x1000&text=Thumbnail">

              <div class="panel">
                <h5>Item Name</h5>
                <h6 class="subheader">$000.00</h6>
              </div>
            </div>

            <div class="large-4 small-6 columns">
              <img src="http://placehold.it/500x500&text=Thumbnail">

等等，你知道它是如何结束的。无论如何，正如您所看到的，这些“面板”是静态的，它们是一张一张添加的。如何根据检索到的元素动态添加它们？

Answer 1

您不能使用标准 <h:dataTable>如果您希望生成的 HTML 看起来像这样。但是如果你使用 <ui:repeat> 就可以达到这样的效果这将简单地迭代一个元素列表而不渲染任何东西。这样你就可以自己渲染表格的内容了。像这样:

<div class="large-8 columns">

  <ui:repeat var="_items" value="#{itemManager.item}">

    <div class="row">

      <div class="large-4 small-6 columns">
        <img src="#{_item.image}">

        <div class="panel">
          <h5>#{_item.name}</h5>
          <h6 class="subheader">#{_item.price}</h6>
        </div>
      </div>