javascript - template-div 克隆到相同的模板 javascript

Question

我在将克隆模板克隆到同一模板时遇到问题。我有一个主模板和两个子模板。我希望能够在事件的一个主模板中打开一个子模板，并在第二个事件的另一个主模板中打开另一个子模板。但现在他们在每个事件中都以相同的主模板打开。主模板:

<main>
  <div id="wrapper">

    <template class="myTemplate">
      <div class="dragdiv">
        <div class="dragdivheader">Main template</div>
          <div class="windowContent">

          </div>
      </div>
    </template>

  </div>
</main>

第一个子模板:

<template>
  <div class="memory">                      
    <a href="#"><img src="image/0.jpeg" alt="A brick"></a>
  </div>
</template>

第二个子模板:

<template class="chatBox">
  <div class="chat">
    <div class="messages">
      <template>
        <div class="message">
          <p class="author"></p>
          <p class="text"></p> 
        </div>
      </template>
    </div>
    <div id="messageArea">
      <textarea class="messageArea"></textarea>
      <input type="button" class="send" value="Send" />
    </div>
  </div>
</template>

事件监听器:

document.querySelector('#memoryLauncher').onclick = function () {
  let container = document.querySelector('#wrapper')
  let mainTemplate = 
  document.querySelectorAll('template'[0].content.firstElementChild
  let div = document.importNode(mainTemplate, true)
  container.appendChild(div)

  startMemory(4, 4)
}

document.querySelector('#chatLauncher').onclick = function () {
  let container = document.querySelector('#wrapper')
  let mainTemplate = 
  document.querySelectorAll('template'[0].content.firstElementChild
  let div = document.importNode(mainTemplate, true)
  container.appendChild(div)

  let chat = new Chat(document.querySelector('.windowContent'))
  chat.connect().then(function (socket) {
  })
}

Answer 1

您需要在“主”模板和“子”模板上调用importNode。接下来，将 subTemplate 附加到 mainTemplate 节点。最后，需要将其附加到 #wrapper div 中。

我还将模板移出 #wrapper div，因为我假设 #wrapper 是您创建所有元素的位置。我的代码如下:

document.querySelector('#memoryLauncher').onclick = function () {
  let templates = document.querySelectorAll('template');
  let mainTemplate =   templates[0].content.firstElementChild;
  let mainNode = document.importNode(mainTemplate, true);

  let subTemplate = templates[1].content.firstElementChild;
  let div = document.importNode(subTemplate, true);
  mainNode.appendChild(div);

  let container = document.querySelector('#wrapper')
  container.appendChild(mainNode);

  startMemory(4, 4)
}

document.querySelector('#chatLauncher').onclick = function () {
  let templates = document.querySelectorAll('template');
  let mainTemplate =   templates[0].content.firstElementChild;
  let mainNode = document.importNode(mainTemplate, true);

  let subTemplate = templates[2].content.firstElementChild;
  let div = document.importNode(subTemplate, true);
  mainNode.appendChild(div);

  let container = document.querySelector('#wrapper');
  container.appendChild(mainNode);


  let chat = new Chat(document.querySelector('.windowContent'))
  chat.connect().then(function (socket) {
  })
}