使用 Polymer 的 core-ajax 加载所有 json 文件后执行方法

Question

我需要在加载所有 json 个文件后执行方法 callMe()。我正在使用 Polymer 的 core-ajax 加载 json 文件。我的代码：

<polymer-element name="my-schedule" attributes="speakersUrl sessionsUrl scheduleUrl">
    <template>
        <core-ajax auto url="{{scheduleUrl}}" handleAs="json" on-core-response="{{scheduleResponse}}"></core-ajax>
        <core-ajax auto url="{{sessionsUrl}}" handleAs="json" on-core-response="{{sessionsResponse}}"></core-ajax>
        <core-ajax auto url="{{speakersUrl}}" handleAs="json" on-core-response="{{speakersResponse}}"></core-ajax>
            </template>
        </div>
    </template>
    <script>
    (function() {
        Polymer('my-schedule', {
            speakersUrl: '../../data/speakers.json',
            sessionsUrl: '../../data/sessions.json',
            scheduleUrl: '../../data/schedule.json',
            speakersResponse: function(event, response) {
                this.speakers = response.response;
            },
            sessionsResponse: function(event, response) {
                this.sessions = response.response;
            },
            scheduleResponse: function(event, response) {
                this.schedule = response.response;
            },
            callMe: function() {
                console.log('I was called after all json files loaded');
            }
        });
    })();
    </script>

谁能帮我解决这个问题？注：否jQuery。

Answer 1

有两种方法：

检查数据何时准备好->调用custom_element，其中在ready()回调中调用了callMe()

  <my-template if="{{data_json.list}}">
       <my-custom_element
          pass_data ='{{data_json.list}}'
       ></my-custom_element></template>

相似：Polymer, how to wait for core-ajax to finish before rendering other elements?

另一种是在scheduleResponse()中调用callMe();

Answer 2

我想我在这里要做的是制作 3 个 true / false 变量，并在每次加载后将加载项的状态设置为 true 并检查其他项的状态。为了防止它触发更多，一旦你可以使用 1 个变量来检查方法是否已经运行.

示例

  <polymer-element name="my-schedule" attributes="speakersUrl sessionsUrl scheduleUrl">
    <template>
        <core-ajax auto url="{{scheduleUrl}}" handleAs="json" on-core-response="{{scheduleResponse}}"></core-ajax>
        <core-ajax auto url="{{sessionsUrl}}" handleAs="json" on-core-response="{{sessionsResponse}}"></core-ajax>
        <core-ajax auto url="{{speakersUrl}}" handleAs="json" on-core-response="{{speakersResponse}}"></core-ajax>
    </template>
    <script>
    (function() {
        Polymer('my-schedule', {
            speakersUrl: '../../data/speakers.json',
            speakerStatus: false,
            sessionsUrl: '../../data/sessions.json',
            sessionStatus: false,
            scheduleUrl: '../../data/schedule.json',
            scheduleStatus: false,
            hasRun: false,
            speakersResponse: function(event, response) {
                this.speakers = response.response;
                this.speakerStatus = true;
                this.checkStatus();
            },
            sessionsResponse: function(event, response) {
                this.sessions = response.response;
                this.sessionStatus = true;
                this.checkStatus();
            },
            scheduleResponse: function(event, response) {
                this.schedule = response.response;
                this.scheduleStatus = true;
                this.checkStatus();
            },
            checkStatus: function () {
              if (this.speakerStatus && this.sessionStatus && this.scheduleStatus && !this.hasRun) {
                this.callMe();
                this.hasRun = true;
              }
            },
            callMe: function() {
                console.log('I was called after all json files loaded');
            }
        });
    })();
    </script>
  </polymer-element>

Answer 3

您可以在 core-ajax 元素上使用 on-core-complete 事件来检查 json 何时加载。例如 <core-ajax auto url="{{scheduleUrl}}" handleAs="json" on-core-complete="{{scheduleResponse}}"></core-ajax>

阅读更多：https://www.polymer-project.org/0.5/docs/elements/core-ajax.html

Answer 4

这应该可以解决问题。通过使用 observe ，您可以在每次更改时检查值并等待所有三个值都出现。您还可以直接绑定到 core-ajax 的 response 属性，而不必执行 setter.

<polymer-element name="my-schedule" attributes="speakersUrl sessionsUrl scheduleUrl">
    <template>
        <core-ajax auto url="{{scheduleUrl}}" handleAs="json" response="{{speakers}}"></core-ajax>
        <core-ajax auto url="{{sessionsUrl}}" handleAs="json" response="{{sessions}}"></core-ajax>
        <core-ajax auto url="{{speakersUrl}}" handleAs="json" response="{{schedule}}"></core-ajax>
    </template>
    <script>
    (function() {
        Polymer('my-schedule', {
            speakersUrl: '../../data/speakers.json',
            sessionsUrl: '../../data/sessions.json',
            scheduleUrl: '../../data/schedule.json',
            observe: {
              'speakers schedule sessions': 'checkReady'  
            },
            checkReady: function() {
              if (this.sessions && this.speakers && this.schedule) { this.callMe(); }
            },
            callMe: function() {
                console.log('I was called after all json files loaded');
            }
        });
    })();
    </script>
</polymer-element>

使用 Polymer 的 core-ajax 加载所有 json 文件后执行方法

Execute method after all json files are loaded using Polymer's core-ajax

javascript

ajax

json

web-component

polymer