嵌套在dom-if Polymer中時如何觸發子元素上的觀察者

Question

我試圖在子 Polymer 元素中檢索更新的數據，但數據仍然綁定到初始化值。

家長

<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;
  }
}

孩子

<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

items.0.idItem 是如何改變的？

嘗試像這樣更改 idItem this.set('items.0.idItem', 100)

Answer 2

通常，重新觸發除使用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 request 。

iron-ajax有一個名為generateRequest()方法，如果您沒有將auto屬性設置為iron-ajax組件並且不更改該組件的參數，則您可能應該使用它（請參閱https://www.webcomponents.org /element/@polymer/iron-ajax/elements/iron-ajax#property-auto )