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 文档，很明显您应该将connectedCallback方法更改为attributeChangedCallback。原因是Elm使用虚拟DOM，并且在模型更改时使实际DOM更新最少。特别是，当计数更改时，它不会从 DOM 中删除自定义元素并添加新元素，它只会更改相应的属性。看来你的connecedCallback不会被召唤，但attributeChangedCallback应该被召唤。

此外，正如正确观察到@Murdock的那样(通过阅读 MDN 文章，特别是"使用生命周期回调"部分，比我更好(，必须通过使用observedAttributesgetter 显式设置为观察data-count属性，如下所示：

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