Привязка значения свойства входа к атрибуту - PullRequest
Новая
       43

Привязка значения свойства входа к атрибуту

0 голосов
/ 22 февраля 2019

Я пытаюсь создать свои собственные элементы DOM с помощью веб-компонентов (с проверкой и взаимодействием с сервером).Я следую инструкции по MDN: https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements

    attributeChangedCallback(name, oldValue, newValue) {
    console.log(newValue);
  }

Я могу получить изменение атрибута.Но если у меня есть, например, текстовое поле, где значение изменяется.Как связать значение текстового поля с атрибутом?Это даже хороший способ сделать это?

Это мой код: 

'use strict';

class PopUpInfo extends HTMLElement {

    static get observedAttributes() {
        return ['value'];
    }
    constructor() {
      // Always call super first in constructor
      super();

      // write element functionality in here

    var shadow = this.attachShadow({mode: 'closed'});
    console.log("Created");
    let tbName = document.createElement("input");
    shadow.appendChild(tbName);
    }
    attributeChangedCallback(name, oldValue, newValue) {
        console.log(newValue);
      }
  }
  customElements.define('popup-info', PopUpInfo);

Позже я хотел бы добавить несколько элементов управления HTML в «PopUpInfo».Позднее название будет похоже на «Controlunit».

1 Ответ

0 голосов
/ 22 февраля 2019

Вам нужно взять атрибут или свойство и передать это значение во внутренний DOM.Нет привязки, если вы не используете фреймворк.Если вы хотите использовать LitElement или другие вещи, тогда вы получаете привязку.Лично я рассматриваю эти фреймворки как огромное количество накладных расходов.

Но посмотрите на этот пример: 

class PopUpInfo extends HTMLElement {
  static get observedAttributes() {
    return ['value'];
  }
  constructor() {
    // Always call super first in constructor
    super();

    // write element functionality in here

    var shadow = this.attachShadow({mode: 'open'});
    let textEl = document.createElement("input");
    shadow.appendChild(textEl);
    
    // Set attribute to value of inner element `.value`
    textEl.addEventListener('input', (evt) => {
      this.setAttribute('value', textEl.value);
    });
  }
  
  attributeChangedCallback(name, oldValue, newValue) {
    console.log(`attributeChangedCallback(${name}, ${oldValue}, ${newValue})`);
    if (oldValue !== newValue) {
      this.value = newValue;
    }
  }
  
  get value() {
    let textEl = this.shadowRoot.querySelector("input");
    return textEl.value;
  }
        
  set value(newValue) {
    console.log(`set value(${newValue})`);
    let textEl = this.shadowRoot.querySelector("input");
    if (newValue == null) { // check for null and undefined           textEl.value = '';
    }
    else {
      textEl.value = newValue;
    }
  }
}

customElements.define('popup-info', PopUpInfo);
<popup-info value="my info"></popup-info>

Первый: поскольку вы смотрите только атрибут one , ваша функция attributeChangedCallback должна видеть только, если oldValue и newValueразные.Если они не отличаются, тогда нечего делать.Если они отличаются, то вы используете newValue.

. В моем примере я передаю значение атрибута свойству value.

. В установщике свойств я проверяю,значение равно null или undefined (использование двойных равных для null (x == null) делает именно это. Если это null или undefined, тогда мы устанавливаем value внутреннего элемента <input>в пустую строку. Если это не null или undefined, тогда мы устанавливаем value внутреннего элемента <input> равным тому, что было отправлено.

Получатель свойства просто читает valueвнутреннего элемента <input> и возвращает его.

...