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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了template-div克隆到相同的模板javascript中相关的知识,希望对你有一定的参考价值。

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

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

您需要在“主”模板和“子”模板上调用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) {
  })
}

以上是关于template-div克隆到相同的模板javascript中的主要内容,如果未能解决你的问题,请参考以下文章

Java 克隆

Java对象的浅克隆和深克隆

SharePoint - 将 Web 部件从模板网站克隆到新网站 - XML 错误

java 浅克隆 深克隆

JAVA中带有克隆方法的迭代器VS ArrayList.addAll()

java对象的克隆