Question

我正在创建一个需要在列表中切换元素的选举应用程序。我有以下自定义元素Web组件。为简洁起见，我已经从班级中删除了无关的功能。

// Position
// ---------------------------------------
class Position extends HTMLElement {
    constructor(title) {
        super();
        this.title = title
    }

    connectedCallback() {
        this.className = "portlet";
        // Copy the HTML template
        var template = document.querySelector("#template-e-position");
        this.appendChild(document.importNode(template.content, true));
        // Create the title tag
        var title = this.querySelector(".title");
        title.innerHTML = this.title;
        // Create event listener for swap links
        this.querySelector(".moveUp").addEventListener("click", function(e) {
            swapWithPrevSibling(that);
        });
        this.querySelector(".moveDown").addEventListener("click", function(e) {
            swapWithNextSibling(that);
        });
    }
}
customElements.define('e-position', Position);

// Candidate
// ---------------------------------------
class Candidate extends HTMLElement {
  constructor(name) {
    super();
    this.name = name;
  }
  connectedCallback() {
        // Copy the HTML template
        var template = document.querySelector("#template-e-candidate");
        this.appendChild(document.importNode(template.content, true));
        // Create the title tag
        var name = this.querySelector(".name");
        name.innerHTML = this.name;
        // Create event listener for delete link
        var a = this.querySelector("a.delete");
        var that = this;
        a.addEventListener('click', function(e) { return that.delete(e) }, false);
    }

    delete(event) {
        deleteNode(this);
    }

}
customElements.define('e-candidate', Candidate);

我有交换功能：

function swapWithPrevSibling (elm) {
    elm.parentNode.insertBefore(elm,elm.previousSibling)
}

function swapWithNextSibling (elm) {
    elm.parentNode.insertBefore(elm.nextSibling,elm)
}

我使用以下模板构建自定义元素：

<template id="template-e-position">
    <div class="header">
        <span class="title"></span>
        <div class="edit-menu">
            <a class="moveUp">&uarr;</a>
            <a class="moveDown">&darr;</a>
            <a class="delete">X</a>
        </div>
    </div>
    <div class="candidate-list">
    </div>
    <form class="add-candidate">
        <input type="text" />
        <input type="submit" value="Add candidate">
    </form>
</template>

<template id="template-e-candidate">
    <span class="name"></span>
    <div class="edit-menu">
        <a class="moveUp">&uarr;</a>
        <a class="moveDown">&darr;</a>
        <a class="delete">X</a>
    </div>
</template>

由于我从HTML模板创建自定义元素，我需要克隆connectedCallback()中的模板（因为在v1中不允许在构造函数中添加子元素）。结果是当我将交换函数调用到列表中的“位置”时，它最终重新克隆模板并向Position和Candidate元素添加不必要的DOM元素。

例如，交换后的结果应为：

<e-position title="Vice-President" class="portlet">
    <div class="header">
        <span class="title">Vice-President</span>
        <div class="edit-menu">
            <a class="moveUp">↑</a>
            <a class="moveDown">↓</a>
            <a class="delete">X</a>
        </div>
    </div>
    <div class="candidate-list">
<e-candidate>
    <span class="name">Evan</span>
    <div class="edit-menu">
        <a class="moveUp">↑</a>
        <a class="moveDown">↓</a>
        <a class="delete">X</a>
    </div>
</e-candidate>
<e-candidate>
    <span class="name">Steph</span>
    <div class="edit-menu">
        <a class="moveUp">↑</a>
        <a class="moveDown">↓</a>
        <a class="delete">X</a>
    </div>
</e-candidate>
    </div>
    <form class="add-candidate">
        <input type="text">
        <input value="Add candidate" type="submit">
    </form>
</e-position>

但最终却是混乱的：

<e-position title="Vice-President" class="portlet">
    <div class="header">
        <span class="title">Vice-President</span>
        <div class="edit-menu">
            <a class="moveUp">↑</a>
            <a class="moveDown">↓</a>
            <a class="delete">X</a>
        </div>
    </div>
    <div class="candidate-list">
    <e-candidate>
    <span class="name">Evan</span>
    <div class="edit-menu">
        <a class="moveUp">↑</a>
        <a class="moveDown">↓</a>
        <a class="delete">X</a>
    </div>

    <span class="name"></span>
    <div class="edit-menu">
        <a class="moveUp">↑</a>
        <a class="moveDown">↓</a>
        <a class="delete">X</a>
    </div>
    </e-candidate><e-candidate>
    <span class="name">Steph</span>
    <div class="edit-menu">
        <a class="moveUp">↑</a>
        <a class="moveDown">↓</a>
        <a class="delete">X</a>
    </div>

    <span class="name"></span>
    <div class="edit-menu">
        <a class="moveUp">↑</a>
        <a class="moveDown">↓</a>
        <a class="delete">X</a>
    </div>
    </e-candidate>
    </div>
    <form class="add-candidate">
        <input type="text">
        <input value="Add candidate" type="submit">
    </form>

    <div class="header">
        <span class="title"></span>
        <div class="edit-menu">
            <a class="moveUp">↑</a>
            <a class="moveDown">↓</a>
            <a class="delete">X</a>
        </div>
    </div>
    <div class="candidate-list">
    </div>
    <form class="add-candidate">
        <input type="text">
        <input value="Add candidate" type="submit">
    </form>
</e-position>

是否有更好的方法来克隆HTML模板，以便我不需要在connectedCallback中添加元素？如果没有，我怎样才能有效地交换而不带所有额外的元素？请注意，我不想使用jQuery，因为我想要一个轻量级的应用程序。

我已经看过这个并且它不起作用，因为它最终调用connectedCallback并插入How to swap DOM child nodes in JavaScript?

Answer 1

有几种解决方案：

您可以使用标志来查看它是否是第一次调用回调，并仅在尚未设置标志时插入模板。

customElements.define('e-candidate', class extends HTMLElement {
  connectedCallback() {
    if (!this.init) {
      var template = document.querySelector('#template-e-candidate')
      this.appendChild(template.content.cloneNode(true))
      this.querySelector('.moveUp')
          .onclick = () => 
              this.previousElementSibling && this.parentElement.insertBefore(this, this.previousElementSibling)
      this.init = true
    }
  }
})

e-candidate { display:block }

<template id="template-e-candidate">
    <slot></slot>
    <button class="moveUp">&uarr;</button>
</template>

<e-candidate>First</e-candidate>
<e-candidate>Second</e-candidate>

您可以将CSS flexbox与CSS order属性一起使用，以便在不使用insertBefore()的情况下更改元素的顺序。

交换“自定义元素”而不调用connectedCallback

1 个答案: