如何在KotlinKtor中使用Freemarker為串列中的每個元素執行javascript函式？-有解無憂

我正在使用 Kotlin 和 Ktor 呼叫 api，以獲取一本書作為 json 回應作為回報。從這個回應中，我想在我的前端 Freimarker .ftl 檔案中加載書籍封面。我正在用 javascript 進行此呼叫并將其寫入 html。當我像顯示的代碼那樣呼叫函式時，只有串列中的第一個元素才能獲得書的封面。其余為空。javascript 在 html 中作為行內代碼執行。我只是為串列中的每個新專案呼叫此函式。

那么我該怎么做才能為串列中的每個元素加載影像呢？

索引.ftl：

<#-- @ftlvariable name="books" type="kotlin.collections.List<com.nw.models.Book>" -->
<#import "_layout.ftl" as layout />
<@layout.header>
    <#list books?reverse as book>
<div >
    <hr>
        <div >
        <div  style="width: 18rem;">
            <img id="img-book"  src="https://via.placeholder.com/128x209.png">
            <div >
                <h5 >${book.title}</h5>
                <p >${book.author}</p>
                <input type="hidden" id="img-url" name="imageUrl" placeholder="${book.imageUrl}">
                <script type="text/javascript">
                    (function() {
                        let a1 = document.getElementById("img-url").getAttribute("placeholder");
                        const image = document.getElementById("img-book");
                        image.src = a1;
                    })();
                </script>
                <a href="/books/${book.id}" >Go to Book</a>
            </div>
        </div>
        </div>
</div>
    </#list>
    <hr>
    <p>
        <a href="/books/new">Create book</a>
    </p>
</@layout.header>

uj5u.com熱心網友回復：

使用當前的 DOM 腳本方法，OP 必須確保 html 渲染程序實際上id為每個書籍專案創建一個唯一值，因此img-url不是id每個書籍專案的有效值。同樣的 btw 適用于每個影像元素的img-book id值。并且該placeholder屬性不能被濫用為資料存盤；正確的方法是使用自定義data-*屬性。

一個人甚至可以很容易地實作一種完全沒有id屬性和隱藏輸入欄位的方法，只需使用與資料相關的特性、自定義data-*屬性和元素的相關dataset屬性。

<#-- @ftlvariable name="books" type="kotlin.collections.List<com.nw.models.Book>" -->
<#import "_layout.ftl" as layout />
<@layout.header>

  <#list books?reverse as book>
    <div >

      <hr>
      <div >
        <div  style="width: 18rem;">

          <img data-book-cover-src="${book.imageUrl}"  src="https://via.placeholder.com/128x209.png">

          <div >
            <h5 >${book.title}</h5>
            <p >${book.author}</p>
            <a href="/books/${book.id}" >Go to Book</a>
          </div>

        </div>
      </div>

    </div>
  </#list>

  <script type="text/javascript">
    document
      .querySelectorAll('img[data-book-cover-src]')
      .forEach(elmNode =>

        elmNode.src = elmNode.dataset.bookCoverSrc
      );
  </script>

  <hr>
  <p>
    <a href="/books/new">Create book</a>
  </p>
</@layout.header>

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/527441.html

標籤：javascriptdom自定义数据属性克托尔html-模板

上一篇：如何將<inputtype="file>編碼為base64字串？

下一篇：如何在Python中使用Selenium在不重繪DOM的情況下更新多個頁面元素以避免StaleElementReferenceException？