Question

我面临的问题有两个部分

我试图在具有相同类名的两个div上安装组件，但将svelte组件加载到第一个目标元素上。
当我在单击按钮时添加元素时，必须加载以它为目标的Svelte组件。

我正在尝试实现这些原因，因为我正在使用SPA应用程序，该应用程序通过单击按钮添加了小部件。

我的index.html看起来像

<script>
    function addTable() {
        var iDiv = document.createElement('div');
        iDiv.className = 'table';
        document.body.appendChild(iDiv);
    }
</script>

<body>
    <div class="table"></div>
    <div class="table"></div>
    <button onclick="addTable()">Add Table</button>
    <script src='bundle.js'></script>
</body>

我的main.js看起来像

import App from './App.svelte';

const app = new App({
  target: document.querySelector('.table')
});

export default app;

Answer 1

我能够解决上面报告的问题/问题

如何在具有相同类的2 div上安装组件

我通过遍历共享类的所有元素并为此实例化应用程序来实现这一目标，例如：

document.querySelectorAll(".svelte-container").forEach(element => {
    if (!element.hasChildNodes()) {
      new App({
        target: element
      });
    }
  });

在将新的div添加/添加到DOM时如何加载组件我是通过使用MutationObserver实现的。

var callback = function(mutationsList, observer) {
  for (var mutation of mutationsList) {
    if (mutation.type == "childList") {
      if (mutation.target.querySelector(".svelte-table")) {
        init();
      }
    }
  }
};

我的index.html文件看起来像

<script>
      function addButton() {
        var elem1 = document.createElement("div");
        elem1.className = "svelte-table";
        elem2 = document.createElement("div");
        elem2.className = "svelte-container";
        elem1.appendChild(elem2);
        document.body.appendChild(elem1);
      }
    </script>
  </head>

  <body>
    <div></div>
    <div class="svelte-table"><div class="svelte-container"></div></div>
    <div class="svelte-table"><div class="svelte-container"></div></div>

    <button onclick="addButton()">Click me</button>
  </body>
  <script src="bundle.js"></script>

我的main.js看起来像

import App from "./App.svelte";
function init() {
  document.querySelectorAll(".svelte-container").forEach(element => {
    if (!element.hasChildNodes()) {
      new App({
        target: element
      });
    }
  });
}

init();

var targetNode = document.querySelector("body");
var config = { attributes: false, childList: true, subtree: true };

var callback = function(mutationsList, observer) {
  for (var mutation of mutationsList) {
    if (mutation.type == "childList") {
      if (mutation.target.querySelector(".svelte-table")) {
        init();
      }
    }
  }
};

var observer = new MutationObserver(callback);

// Start observing the target node for configured mutations
observer.observe(targetNode, config);

如何针对多个具有相同类的dom元素来安装一个精简组件

1 个答案: