Как обновить полимерный компонент при смене модели

У меня есть простой компонент 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>

0 ответов

Другие вопросы по тегам