0

我有一个简单的 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>

4

0 回答 0