使用Polymer的core-ajax加載所有json文件后的Execute方法

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

這應該可以解決問題。 通過使用observe您可以在每次更改值時檢查它們的值，並等待所有三個值出現。 您也可以直接綁定到core-ajax的response屬性，而不必進行設置器。

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

Answer 2

有兩種方法：

1. 檢查數據何時准備就緒->調用custom_element，其中在ready（）回調中調用callMe（）。

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

相似： 聚合物，如何在渲染其他元素之前等待core-ajax完成？

2. 另一種是在scheduleResponse（）中調用callMe（）;

Answer 3

我想我要在這里做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 4

您可以在core-ajax元素上使用on-core-complete事件來檢查JSON何時加載。 EG <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