Javascript 使用Polymer'；加载所有json文件后执行方法；s核心ajax

在加载所有json文件之后，我需要执行方法

callMe（）

。 我使用Polymer的核心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>

（功能（）{
聚合物（“我的时间表”{
speakersUrl:“../../data/speakers.json”，
sessionsUrl:“../../data/sessions.json”，
scheduleUrl:“../../data/schedule.json”，
speakersResponse：函数（事件、响应）{
this.speakers=response.response；
},
SessionResponse：函数（事件、响应）{
this.sessions=response.response；
},
scheduleResponse：函数（事件、响应）{
this.schedule=response.response；
},
callMe:function（）{
log（'加载所有json文件后调用我'）；
}
});
})();

谁能帮我？

---

注意：无jQuery。

有两种方法：

检查数据何时准备就绪->调用在ready（）回调中调用callMe（）的自定义元素

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

类似的：

另一种是在scheduleResponse（）中调用callme（）

---

我想我在这里要做的是创建3个真/假变量，在每次加载后将加载项的状态设置为真，并检查其他项的状态。为了防止它再次触发，您可以再使用一个变量来检查该方法是否已经运行

范例

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

（功能（）{
聚合物（“我的时间表”{
speakersUrl:“../../data/speakers.json”，
发言人状态：错，
sessionsUrl:“../../data/sessions.json”，
会话状态：错误，
scheduleUrl:“../../data/schedule.json”，
scheduleStatus:false，
哈斯伦：错，
speakersResponse：函数（事件、响应）{
this.speakers=response.response；
this.speakerStatus=true；
这是checkStatus（）；
},
SessionResponse：函数（事件、响应）{
this.sessions=response.response；
this.sessionStatus=true；
这是checkStatus（）；
},
scheduleResponse：函数（事件、响应）{
this.schedule=response.response；
this.scheduleStatus=true；
这是checkStatus（）；
},
检查状态：函数（）{
if（this.speakerStatus&&this.sessionStatus&&this.scheduleStatus&&！this.hasRun）{
这个。callMe（）；
this.hasRun=true；
}
},
callMe:function（）{
log（'加载所有json文件后调用我'）；
}
});
})();

您可以在核心ajax元素上使用on core complete事件来检查json何时加载。 例如

---

阅读更多信息：

这应该可以解决问题。通过使用

观察

，您可以在每次值更改时检查这些值，并等待所有三个值出现。您还可以直接绑定到

核心ajax

的

响应

属性，而不必执行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>

（功能（）{
聚合物（“我的时间表”{
speakersUrl:“../../data/speakers.json”，
sessionsUrl:“../../data/sessions.json”，
scheduleUrl:“../../data/schedule.json”，
注意：{
“发言者计划会议”：“检查就绪”
},
checkReady:function（）{
如果（this.sessions&&this.speakers&&this.schedule）{this.callMe（）；}
},
callMe:function（）{
log（'加载所有json文件后调用我'）；
}
});
})();

第二种方法不起作用，因为当我在scheduleResponse（）中调用该方法时，另一个文件仍在下载。Michael Bleigh的方法似乎更干净。美好的