ELM自定义元素

Question

我有以下的 ELM 视图元素：

Html.node "test-elem" 
 [ Attributes.attribute "data-count" (model.count |> String.fromInt) ]
 []

test-elem是一个自定义的HTML元素：

 constructor() {
        super();
        this.me = this;
    }
    connectedCallback() {
        console.info(this.dataset.count);
        this.div = document.createElement("div");
        this.appendChild(this.div);
        this.div.innerText = "" + this.dataset.count;
    }

   attributeChangedCallback() {
        console.info(this.dataset.count);

        this.div.innerText = "" + this.dataset.count;
    }

如果model.count更改，自定义元素不会被重新生成。我该如何强制刷新呢？ https://ellie-app.com/6SRrZjCzwfra1 经过@Robin的建议编辑，但没有成功。

- Murdock

Answer 1

我认为您的 Elm 代码没有问题，我认为这是由于 JavaScript 中自定义元素定义有问题。

我不熟悉自定义元素 API，但看着您的代码（如下所示）：

customElements.define('test-elem', class TestElem extends HTMLElement {

        constructor() {
            super();
            this.me = this;
        }
        connectedCallback() {
            console.info(this.dataset.count);
            var div = document.createElement("div");
            this.appendChild(div);
            div.innerText = "" + this.dataset.count;
        }
    });

根据MDN文档中关于自定义元素的说明，显然应该将connectedCallback方法更改为attributeChangedCallback。原因是Elm使用虚拟DOM，在模型更改时尽可能少地更新实际DOM。特别是当计数更改时，它不会从DOM中删除自定义元素并添加新元素，而只会更改相应的属性。因此似乎你的connecedCallback将不会被调用，但应该调用attributeChangedCallback。

此外，正如@Murdock所观察到的(通过阅读MDN文章，具体来说是“Using the lifecycle callbacks”部分，比我更好)，必须明确设置data-count属性以进行观察，方法是使用以下代码：observedAttributes getter。

static get observedAttributes() {
    return ['data-count'];
}     

- Robin Zigmond

---

啊哇。好的，我已经更新了我的代码，但是我仍然没有得到正确的行为。 - Murdock

它从未触发attributeChangedCallback。 - Murdock

哦，好的，我无法测试它，但是我相当确定这会起作用。不确定还有什么其他建议。 - Robin Zigmond

添加observedAttributes解决了我的问题。static get observedAttributes() { return ['data-count']; } - Murdock

谢谢，做得好。我已经编辑了我的答案。 - Robin Zigmond

这张图可以帮助理解正在发生的事情：https://andyogo.github.io/custom-element-reactions-diagram/ - Danny '365CSI' Engelman