Question

我有一个关于HTML的模板和一个JSON对象数组，我尝试使用数组中的对象来使用模板创建一个List。该列表看起来不同，因为我认为我没有使用该模板。有谁知道我该如何使用它？

＆＃13;

listOfBirds = document.querySelector("#bird-list").innerHTML;
theList = document.querySelector(".bird-list"),
obj = JSON.parse(listOfBirds);
 
let img = document.createElement("img"),
    name = document.createElement("name"),
    latinName = document.createElement("latinName");

name.innerHTML = obj[i].name;
name.className = "bird-name";
latinName.innerHTML = obj[i].latinName;
latinName.className = "bird-latin-name";
img.src = obj[i].imagePath;
img.className = "bird-image";
item.appendChild(img);
item.appendChild(name);
item.appendChild(latinName);
theList.appendChild(item);

＆＃13;

<script type="text/template" id="bird-list-entry">
  <li class="bird-list-entry" bird-id="<%= id %>">
    <img src="<%= imagePath %>" class="bird-image" />
    <div class="bird-description">
      <span class="bird-name"><%= name %></span>
      <span class="bird-latin-name"><%= latinName %></span>
    </div>
    <span class="add-bird-button">
      <i class="fa fa-plus-circle" aria-hidden="true"></i>
    </span>
  </li>
</script>
<script type="text/template" id="bird-list">
[{ "id":1, "name":"Haussperling", "latinName":"Passer domesticus", "imagePath":"resources/images/haussperling.png", "audioPath":"resources/data/audio/haussperling.ogg" },{ "id":2, "name":"Kohlmeise", "latinName":"Parus major", "imagePath":"resources/images/kohlmeise.png", "audioPath":"resources/data/audio/kohlmeise.ogg" },{ "id":3, "name":"Star", "latinName":"Sturnus vulgaris", "imagePath":"resources/images/star.png", "audioPath":"resources/data/audio/star.ogg" },{ "id":4, "name":"Amsel", "latinName":"Turdus merula", "imagePath":"resources/images/amsel.png", "audioPath":"resources/data/audio/amsel.ogg" },{ "id":5,"name":"Blaumeise", "latinName":"Cyanistes caerruleus", "imagePath":"resources/images/blaumeise.png", "audioPath":"resources/data/audio/blaumeise.ogg" },{ "id":6, "name":"Elster", "latinName":"Pica pica", "imagePath":"resources/images/elster.png", "audioPath":"resources/data/audio/elster.ogg" },{ "id":7, "name":"Grünfink", "latinName":"Chloris chloris", "imagePath":"resources/images/gruenfink.png", "audioPath":"resources/data/audio/gruenfink.ogg" },{ "id":8, "name":"Mehlschwalbe", "latinName":"Delichon urbicum", "imagePath":"resources/images/mehlschwalbe.png", "audioPath":"resources/data/audio/mehlschwalbe.ogg" },{ "id":9, "name":"Mauersegler", "latinName":"Apus apus", "imagePath":"resources/images/mauersegler.png", "audioPath":"resources/data/audio/mauersegler.ogg" },{ "id":10, "name":"Buchfink", "latinName":"Fringilla coelebs", "imagePath":"resources/images/buchfink.png", "audioPath":"resources/data/audio/buchfink.ogg" },{ "id":11, "name":"Ringeltaube", "latinName":"Columba palumbus", "imagePath":"resources/images/ringeltaube.png", "audioPath":"resources/data/audio/ringeltaube.ogg" },{ "id":12, "name":"Feldsperling", "latinName":"Passer montanus", "imagePath":"resources/images/feldsperling.png", "audioPath":"resources/data/audio/feldsperling.ogg" },{ "id":13, "name":"Türkentaube", "latinName":"Streptopelia decaocto", "imagePath":"resources/images/tuerkentaube.png", "audioPath":"resources/data/audio/tuerkentaube.ogg" },{ "id":14, "name":"Rauchschwalbe", "latinName":"Hirundo rustica", "imagePath":"resources/images/rauchschwalbe.png", "audioPath":"resources/data/audio/rauchschwalbe.ogg" },{ "id":15, "name":"Rotkehlchen", "latinName":"Erithacus rubecula", "imagePath":"resources/images/rotkehlchen.png", "audioPath":"resources/data/audio/rotkehlchen.ogg"}]
</script>

＆＃13;

Answer 1

我必须进行一些更改，但此代码可以正常运行。

对于HTML模板，我从<script type="text/template" id="bird-list-entry">更改为<template id="bird-list-entry">，这在所有较新的浏览器中都受支持，但不支持任何版本的Internet Explorer。我还删除了所有<%= name%>内容，因为模板中不需要它们。

我更改了JavaScript：

正确加载模板。
遍历您的对象数组。
克隆数组中每个条目的模板
从克隆模板中获取子元素
更改克隆模板中的属性和属性
将克隆和修改的模板添加到列表中。

＆＃13;

var listOfBirds = document.querySelector("#bird-list").innerHTML;
var objList = JSON.parse(listOfBirds);
var theList = document.querySelector(".bird-list");
var template = document.querySelector("#bird-list-entry").content;


objList.forEach(
  obj => {
    let item = template.cloneNode(true);
    let li = item.querySelector("li");
    let img = item.querySelector("img");
    let name = item.querySelector(".bird-name");
    let latinName = item.querySelector(".bird-latin-name");
    li.setAttribute('bird-id', obj.id);
    name.innerHTML = obj.name;
    latinName.innerHTML = obj.latinName;
    img.src = obj.imagePath;
    theList.appendChild(item);    
  }
);

＆＃13;

<template id="bird-list-entry">
  <li class="bird-list-entry">
    <img  class="bird-image" />
    <div class="bird-description">
      <span class="bird-name"></span>
      <span class="bird-latin-name"></span>
    </div>
    <span class="add-bird-button">
      <i class="fa fa-plus-circle" aria-hidden="true"></i>
    </span>
  </li>
</template>
<script type="text/template" id="bird-list">
[{"id":1,"name":"Haussperling","latinName":"Passer domesticus","imagePath":"resources/images/haussperling.png","audioPath":"resources/data/audio/haussperling.ogg"},{"id":2,"name":"Kohlmeise","latinName":"Parus major","imagePath":"resources/images/kohlmeise.png","audioPath":"resources/data/audio/kohlmeise.ogg"},{"id":3,"name":"Star","latinName":"Sturnus vulgaris","imagePath":"resources/images/star.png","audioPath":"resources/data/audio/star.ogg"},{"id":4,"name":"Amsel","latinName":"Turdus merula","imagePath":"resources/images/amsel.png","audioPath":"resources/data/audio/amsel.ogg"},{"id":5,"name":"Blaumeise","latinName":"Cyanistes caerruleus","imagePath":"resources/images/blaumeise.png","audioPath":"resources/data/audio/blaumeise.ogg"},{"id":6,"name":"Elster","latinName":"Pica pica","imagePath":"resources/images/elster.png","audioPath":"resources/data/audio/elster.ogg"},{"id":7,"name":"Grünfink","latinName":"Chloris chloris","imagePath":"resources/images/gruenfink.png","audioPath":"resources/data/audio/gruenfink.ogg"},{"id":8,"name":"Mehlschwalbe","latinName":"Delichon urbicum","imagePath":"resources/images/mehlschwalbe.png","audioPath":"resources/data/audio/mehlschwalbe.ogg"},{"id":9,"name":"Mauersegler","latinName":"Apus apus","imagePath":"resources/images/mauersegler.png","audioPath":"resources/data/audio/mauersegler.ogg"},{"id":10,"name":"Buchfink","latinName":"Fringilla coelebs","imagePath":"resources/images/buchfink.png","audioPath":"resources/data/audio/buchfink.ogg"},{"id":11,"name":"Ringeltaube","latinName":"Columba palumbus","imagePath":"resources/images/ringeltaube.png","audioPath":"resources/data/audio/ringeltaube.ogg"},{"id":12,"name":"Feldsperling","latinName":"Passer montanus","imagePath":"resources/images/feldsperling.png","audioPath":"resources/data/audio/feldsperling.ogg"},{"id":13,"name":"Türkentaube","latinName":"Streptopelia decaocto","imagePath":"resources/images/tuerkentaube.png","audioPath":"resources/data/audio/tuerkentaube.ogg"},{"id":14,"name":"Rauchschwalbe","latinName":"Hirundo rustica","imagePath":"resources/images/rauchschwalbe.png","audioPath":"resources/data/audio/rauchschwalbe.ogg"},{"id":15,"name":"Rotkehlchen","latinName":"Erithacus rubecula","imagePath":"resources/images/rotkehlchen.png","audioPath":"resources/data/audio/rotkehlchen.ogg"}]
</script>
<ul class="bird-list"></ul>

＆＃13;

<强>更新

由于您无法使用<template>标记，因此使用<script>标记的代码相同：

＆＃13;

var listOfBirds = document.querySelector("#bird-list").innerHTML;
var objList = JSON.parse(listOfBirds);
var theList = document.querySelector(".bird-list");
var template = document.createElement('template');
template.innerHTML = document.querySelector("#bird-list-entry").innerHTML;


objList.forEach(
  obj => {
    let item = template.content.cloneNode(true);
    let li = item.querySelector("li");
    let img = item.querySelector("img");
    let name = item.querySelector(".bird-name");
    let latinName = item.querySelector(".bird-latin-name");
    li.setAttribute('bird-id', obj.id);
    name.innerHTML = obj.name;
    latinName.innerHTML = obj.latinName;
    img.src = obj.imagePath;
    theList.appendChild(item);    
  }
);

＆＃13;

<script type="text/template" id="bird-list-entry">
  <li class="bird-list-entry" bird-id="<%= id %>">
    <img src="<%= imagePath %>" class="bird-image" />
    <div class="bird-description">
      <span class="bird-name"><%= name %></span>
      <span class="bird-latin-name"><%= latinName %></span>
    </div>
    <span class="add-bird-button">
      <i class="fa fa-plus-circle" aria-hidden="true"></i>
    </span>
  </li>
</script>
<script type="text/template" id="bird-list">
[{"id":1,"name":"Haussperling","latinName":"Passer domesticus","imagePath":"resources/images/haussperling.png","audioPath":"resources/data/audio/haussperling.ogg"},{"id":2,"name":"Kohlmeise","latinName":"Parus major","imagePath":"resources/images/kohlmeise.png","audioPath":"resources/data/audio/kohlmeise.ogg"},{"id":3,"name":"Star","latinName":"Sturnus vulgaris","imagePath":"resources/images/star.png","audioPath":"resources/data/audio/star.ogg"},{"id":4,"name":"Amsel","latinName":"Turdus merula","imagePath":"resources/images/amsel.png","audioPath":"resources/data/audio/amsel.ogg"},{"id":5,"name":"Blaumeise","latinName":"Cyanistes caerruleus","imagePath":"resources/images/blaumeise.png","audioPath":"resources/data/audio/blaumeise.ogg"},{"id":6,"name":"Elster","latinName":"Pica pica","imagePath":"resources/images/elster.png","audioPath":"resources/data/audio/elster.ogg"},{"id":7,"name":"Grünfink","latinName":"Chloris chloris","imagePath":"resources/images/gruenfink.png","audioPath":"resources/data/audio/gruenfink.ogg"},{"id":8,"name":"Mehlschwalbe","latinName":"Delichon urbicum","imagePath":"resources/images/mehlschwalbe.png","audioPath":"resources/data/audio/mehlschwalbe.ogg"},{"id":9,"name":"Mauersegler","latinName":"Apus apus","imagePath":"resources/images/mauersegler.png","audioPath":"resources/data/audio/mauersegler.ogg"},{"id":10,"name":"Buchfink","latinName":"Fringilla coelebs","imagePath":"resources/images/buchfink.png","audioPath":"resources/data/audio/buchfink.ogg"},{"id":11,"name":"Ringeltaube","latinName":"Columba palumbus","imagePath":"resources/images/ringeltaube.png","audioPath":"resources/data/audio/ringeltaube.ogg"},{"id":12,"name":"Feldsperling","latinName":"Passer montanus","imagePath":"resources/images/feldsperling.png","audioPath":"resources/data/audio/feldsperling.ogg"},{"id":13,"name":"Türkentaube","latinName":"Streptopelia decaocto","imagePath":"resources/images/tuerkentaube.png","audioPath":"resources/data/audio/tuerkentaube.ogg"},{"id":14,"name":"Rauchschwalbe","latinName":"Hirundo rustica","imagePath":"resources/images/rauchschwalbe.png","audioPath":"resources/data/audio/rauchschwalbe.ogg"},{"id":15,"name":"Rotkehlchen","latinName":"Erithacus rubecula","imagePath":"resources/images/rotkehlchen.png","audioPath":"resources/data/audio/rotkehlchen.ogg"}]
</script>
<ul class="bird-list"></ul>

＆＃13;

如何在Javascript中使用HTML中的模板列表？

1 个答案: