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 的建议进行了编辑，但没有运气。

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 documentation for custom elements，显然你应该将connectedCallback 方法更改为attributeChangedCallback。原因是 Elm 使用虚拟 DOM 并在模型更改时使实际 DOM 更新最少。特别是，当计数发生变化时，它不会从 DOM 中删除自定义元素并添加一个新元素，它只会更改适当的属性。因此，您的connecedCallback 似乎不会被调用，但attributeChangedCallback 应该会。

另外，正如@Murdock 正确观察到的（通过阅读 MDN 文章，特别是“使用生命周期回调”部分，比我更好），data-count 属性必须明确设置为观察，通过使用 @ 987654328@getter，如下：

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