Возможно, что attributeChangedCallback получит объект объект, как newVal?

Question

Я бы столкнулся с проблемой при установке свойства объекта ya в веб-компонентах.В моем коде это прослушивание изменений в свойстве с attributeChangedCallback(attrName, oldVal, newVal), но когда я получаю новое свойство, значение newVal равно [Object object].Почему это происходит?

Спасибо

Answer 1

Из документации:

attributeChangedCallback (native)

Атрибуты должны быть явно зарегистрированы для наблюдения.

Для полимерных элементовтолько свойства, явно объявленные в объекте свойств, отслеживаются для изменений атрибутов.(То есть изменение значения атрибута вызывает обратный вызов измененного атрибута и заставляет Polymer установить значение свойства из атрибута.)

https://polymer -library.polymer-project.org / 2.0 /docs / about_20

Если вы получаете [объект объекта], я предполагаю, что вам нужно объявить объект в properties.

---

Кроме того, я бы сам не использовал attributeChangedCallback, а вместо этого назначил для свойства комплексного наблюдателя.

class XCustom extends Polymer.Element {

  static get is() {return 'x-custom'; }

  static get properties() {
    return {
      user: {
        type: Object,
        value: function() {
          return {};
        }
      }
    }
  }

  // Observe the name sub-property on the user object
  static get observers() {
    return [
        'userNameChanged(user.name)'
    ]
  }

  // For a property or sub-property dependency, the corresponding
  // argument is the new value of the property or sub-property
  userNameChanged(name) {
    if (name) {
      console.log('new name: ' + name);
    } else {
      console.log('user name is undefined');
    }

  }
}

https://polymer -library.polymer-project.org / 2.0 / docs /devguide / наблюдатели # простодушные наблюдатели

Answer 2

Атрибут элемента HTML всегда имеет тип string .

Если вы хотите передать Javascript объект , вы должны преобразовать его в нотацию JSON:

<custom-element attribute-name='{ "value": "v1" }'></custom-element>

Вы можете затем проанализировать его attributeChangedCallback():

var o = JSON.parse( newVal )

Answer 3

В соответствии с рекомендациями мы обрабатываем атрибут и свойство изменения в атрибуте attributeChangedCallback HTMLElements.Атрибуты различения устанавливаются через HTML, например, <my-element size=3>;тогда как свойства задаются в js, например, myElement.size = 3.

Идея состоит в том, что наши подклассы HTMLElement будут иметь установщик размера, который установит атрибут, и позволят нам обрабатывать оба случая в attributeChangedCallback, например

class MyElement extends HTMLElement {
  ...

  get size() {
    return this.getAttribute('size');
  }

  set size(value) {
    this.setAttribute('size', value);
  }

  attributeChangedCallback(name, oldValue, newValue) {
    if (name === 'size') {
      // handle size update here
    }
  }
}

Это кажется хорошей идеей, поскольку позволяет одному месту обрабатывать оба возможных метода обновления размера.На самом деле, это поощряется Руководством по передовым методам Google HTMLElement

При этом это проблематично, учитывая, что атрибуты HTML могут обрабатывать только строки.Итак, у нас есть 2 альтернативы:

1) Не обращайте внимания на рекомендации по передовым методам, которые не являются абсолютно необоснованными, поскольку HTMLE-элементы все еще являются новой вещью, и передовые практики не обязательно основаны на многолетнем опыте работы с ними,Возможно, мы делаем прямо противоположное, делегируя изменения атрибутов изменениям свойств, так как это все равно позволит достичь цели, предложенной Google: «избежать [повторных] проблем с повторным входом» и иметь один обработчик.

class MyElement extends HTMLElement {
  ...

  get size() {
    this.size_;
  }

  set size(value) {
    this.size_ = value;
     // handle size update here
  }

  attributeChangedCallback(name, oldValue, newValue) {
    this[name] = newValue;
  }
}

или 2) Положитесь на сеттеры для свойств, которые можно установить для объектов JS, и attributeChangedCallback для свойств, которые могут быть представлены в виде строк.

class MyElement extends HTMLElement {
  ...

  get size() {
    return this.getAttribute('size');
  }

  set size(value) {
    this.setAttribute('size', value);
  }

  get myObj() {
    return this.myObj_;
  }

  set myObj(value) {
    this.myObj_ = value;
    // handle myObj update here
  }

  attributeChangedCallback(name, oldValue, newValue) {
    if (name === 'size') {
      // handle size update here
    }
  }
}

Answer 4

Поскольку вы не предоставили пример кода, я не могу понять, что происходит с ошибкой.

Но вот простой компонент, который поддерживает метод attributeChangedCallback.

Если этоКод помогает, отлично.Но было бы неплохо увидеть ваш код, чтобы понять, что не работает.

// Class for `<my-el>`
class MyEl extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({mode: 'open'});
  }

  static get observedAttributes() {
    return ['name'];
  }

  attributeChangedCallback(attrName, oldVal, newVal) {
    if (oldVal !== newVal) {
      this.shadowRoot.innerHTML = newVal;
    }
  }
}

// Define our web component
customElements.define('my-el', MyEl);

<my-el name="Frodo Baggins"></my-el>