ELM Пользовательские Элементы - PullRequest
Новая
       28

ELM Пользовательские Элементы

4 голосов
/ 10 октября 2019

У меня есть следующий элемент представления 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, но не повезло.

1 Ответ

6 голосов
/ 10 октября 2019

Я не вижу проблем с вашим кодом 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, в частности, раздел «Использование обратных вызовов жизненного цикла»)(лучше, чем я), атрибут data-count должен быть явно установлен для наблюдения, используя геттер observedAttributes, следующим образом: 

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