如何在模態中顯示動態內容？

Question

當我點擊一個按鈕時，我想打開一個模態，在該模態中我想顯示一些我從服務器獲取的數據。我使用 JSON 服務器作為假服務器，將 css 材料化為 css 框架。我只能部分打開模態並顯示我的部分數據。我在控制台中沒有看到任何錯誤。 這是我的 Github 存儲庫的鏈接： https : //github.com/Ivan3628/IT-logger-js

HTML

<ul>
        <li>
          <a
            href="#tech-list-modal"
            class="btn-floating green modal-trigger tech-collection"
            ><i class="material-icons">person</i></a
          >
          <!--Tech list modal-->
          <div id="tech-list-modal" class="modal">
            <div class="modal-content">
              <h4>Technician List</h4>
              <ul class="collection" id="tech-workers"></ul>
            </div>
          </div>
        </li>
</ul>

應用程序.js

const showTechList = () => {
  axios
    .get("http://localhost:5000/techs")
    .then(response => ui.showList(response.data))
    .catch(err => console.log(err));
};

document
  .querySelector(".tech-collection")
  .addEventListener("click", showTechList);

ui.js

class UI {
  constructor() {
    this.techList = document.querySelector("#tech-workers");
  }
 showList(techs) {
    let output = "";

    techs.forEach(tech => {
      output += `
      <li class="collection-item">
      <div>
       ${tech.firstName} ${tech.lastName}
       <a href="#!" class="secondary-content delete-tech" data-id="${tech.id}">
          <i class="material-icons grey-text">delete</i>
        </a>
      </div>
    </li>`;
    });
    this.techList.innerHTML = output;
  }
}

export const ui = new UI();

數據庫.json

{
"techs": [
    {
      "firstName": "Jennifer",
      "lastName": "Williams",
      "id": 1
    },
    {
      "firstName": "John",
      "lastName": "Doe",
      "id": 2
    },
    {
      "firstName": "Sam",
      "lastName": "Smith",
      "id": 3
    }
  ]
}

Answer 1

我解決了它。我認為這可能是 materialize css 的問題。我沒有使用列表來顯示內容，而是使用了行，而不是列出的項目，我使用了 col s12 來循環數據。

html

  <!--Technician list-->
          <div id="tech-list-modal" class="modal">
            <div class="modal-content">
              <h4>Technician list</h4>
              <div class="row" id="tech-workers"></div>
            </div>
          </div>

ui.js

showList(techs) {
    let output = "";

    techs.forEach(tech => {
      output += `
     <div class="col s12">
      ${tech.firstName} ${tech.lastName}
       <a href="#!" class="secondary-content delete-tech" data-id="${tech.id}">
          <i class="material-icons grey-text">delete</i>
        </a>
        <div class="divider"></div>
      </div>

   `;
    });
    this.techList.innerHTML = output;
  }

Answer 2

需要明確的是，將 ul>li 放在 materializcss 的模態中絕對沒有問題。 一個代碼筆來演示：

https://codepen.io/doughballs/pen/RwPpLZY

我們從模態中的單個空 ul 開始：

<!-- Modal Structure -->
  <div id="modal1" class="modal">
    <div class="modal-content">
      <h4>Modal Header</h4>
      <ul class="collection" id="tech-workers">
        <!-- no content! -->
      </ul>
    </div>
    <div class="modal-footer">
      <a href="#!" class="modal-close waves-effect waves-green btn-flat">x</a>
    </div>
  </div>

為了生成動態內容，我使用了一個選擇。 這可以是任何東西——數據庫調用、本地存儲、頁面內容——任何東西。 但是對於這個演示，使用選擇很容易：

    <select>
      <option value="" disabled selected>Choose your option</option>
      <option value="1">Add 1 item</option>
      <option value="2">Add 2 items</option>
      <option value="3">Add 3 items
    </select>

Then, when the select is changed, I pick up the value and use this as a loop to append a new collection-item to the ul, clearing it first so that we have a fresh modal each time.

$('select').on('change',function(){

    var selected = Number( $('select').find(":selected").val() );

    $('#tech-workers').empty();

      for(var i=1; i <= selected; i++ ) {
        $('#tech-workers').append(`<li class="collection-item">I am item number ${i}</li>`);
      }

    $('.modal').modal('open');

  });