Как обновить полимерный компонент при смене модели
У меня есть простой компонент Polymer, который получает данные из внешнего URL-адреса, в этом примере это заполнитель json, в будущем он будет использовать API.
Что я хочу сделать, так это обновить отображаемые данные при обновлении модели. Если измененные данные из отклика API меняются, мне нужно почти немедленно отразить их в HTML (возможно, используя веб-сокеты, в моем случае сигнал R).
<dom-module id="ajax-test">
<template>
<!-- GETS THE DATA FROM A SOURCE -->
<iron-ajax auto
url="https://jsonplaceholder.typicode.com/users"
handle-as="json"
last-response="{{ajaxResponse}}">
</iron-ajax>
<table class="tg">
<caption><span>USERS</span></caption>
<template is="dom-repeat" items="[[ajaxResponse]]">
<tr>
<th class="tg-yw4l">[[item.name]]</th>
<th class="tg-yw4l">[[item.username]]</th>
<th class="tg-yw4l">[[item.email]]</th>
<th class="tg-yw4l">[[item.address.street]] [[item.address.suite]] </th>
</tr>
</template>
</table>
<!-- SHOW THE FETCHED DATA -->
<br />
<pre>[[json(ajaxResponse)]]</pre>
</template>
<script>
class AjaxTest extends Polymer.Element {
static get is() { return 'ajax-test'; }
static get properties() {
return {
prop1: {
type: String,
value: "bar"
}
}
}
json(obj) {
return JSON.stringify(obj, null, 2);
}
}
customElements.define(AjaxTest.is, AjaxTest);
</script>