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) {
  })
}