Как вызвать наблюдателя на дочернем элементе при вложении в DOM-If Polymer

Question

Я пытаюсь получить обновленные данные в дочернем элементе Polymer, но данные остаются привязанными к инициализированному значению.

PARENT

<template is="dom-if" if="[[items.0]]">
  <child-el id="id_0" id-item="[[items.0.idItem]]"></child-el>
</template>

...

_updateChild () {
  if (this.items[0]) {
    this.shadowRoot.getElementById('id_0').idItem = this.items[0].idItem;
    this.shadowRoot.getElementById('id_0').idItem.notifyPath;
  }
}

CHILD

<iron-ajax id="ajax"
  handle-as="json"
  last-response="{{data}}"
  method="get"
  on-error="_onError"
  url="https://api.com/item-price">
</iron-ajax>

<div>
  <p id="price">[[price(data.price)]]</p>
</div>

...

static get properties() {
  return {
    idItem: { type: String, observer: 'getResponse' }
  }
}

getResponse() {
  let request = this.$.ajax.generateRequest();
  request.completes.then(req => {
    this.idItem = null;
  })
}

price(amt) {
  return amt
}

Обновление цены выполняется, но когда установлен idItem, но наблюдатель на idItem "getResponse()" не выполняется и привязывается к data.price.

Как правильно настроить эти события, чтобы каждый раз, когда items.0.idItem изменял привязку к child-eel this.data.price, обновлялся?

Answer 1

Обычно неправильно запускать что-либо, кроме просмотра, с помощью dom-if, если только вы не используете для него атрибут restamp (https://polymer-library.polymer-project.org/3.0/api/elements/dom-if#DomIf -property-restamp )

Ваш подход кажется немного сложным, поскольку после завершения запроса вы изменяете наблюдаемое свойство на null

getResponse() {
  let request = this.$.ajax.generateRequest();
  request.completes.then(req => {
    this.idItem = null;
  })
}

Изменение его на ноль должно привести к повторному запуску наблюдателя снова . Но что произойдет, вы просто снова прослушиваете обратный вызов, без повторного запуска ajax запроса .

iron-ajax имеет метод с именем generateRequest(), вы, вероятно, должны его использовать, если у вас нет атрибута auto, установленного на компонент iron-ajax, и не изменяете параметры этого компонента (см. https://www.webcomponents.org/element/@polymer / железо Аякса / элементы / железо Аякса # свойство-авто )

Answer 2

Как изменился item.0.idItem?

Попробуйте изменить idItem следующим образом this.set('items.0.idItem', 100)