ajax - 如何在 Polymer 中编写可组合的 AJAX 调用

Question

我正在尝试编写一个组件来公开来自 Polymer 中的 AJAX 调用的数据。我想以类似的东西结束。

<get-db data={{data}}></get-db>

<template is="dom-repeat" items="{{data}}">
    <div>{{item}}</div>
</template>

但是，当我在另一个元素中公开组件的data属性时get-db，数据不会绑定到dom-repeat模板。

get-db组件部分如下

<iron-ajax id="ajax"
  url="https://api/endpoint"
  method="post"
  handle-as="json"
  content-type="application/json"
  body="[[request]]"
  last-response="{{response}}"></iron-ajax>

...

  static get properties() {
    return {

      response: Object,

      request: Object,

      username: String,

      data: Object

    }
  }

  getResponse() {
    if (this.username && this.apiKey) {
      this.request = {
        "body": "bodyText"
      };
      let request = this.$.ajax.generateRequest();
      request.completes.then(req => {
        this.setResponse();
      })
      .catch(rejected => {
        console.log(rejected.request);
        console.log(rejected.error);
      })
    }
  }

  setResponse() {
    if(this.response[0]) {
      this.data = this.response[0];
    }
  }

Answer 1

您需要添加通知，但还需要使用this.set方法来获得可观察到的data属性更改。此外，您仅将一项设置为data属性（假设您在response属性中有一个数组。）我猜您需要所有数组，而不是仅0. index当您在 dom-repeat 中循环时。这就是为什么下面的代码可能会有所帮助：

static get properties() {
    return {

      response:{
         type:Object,
         observer:'checkResponce'},

      request: Object,

      username: String,

      data: {
         type:Array,
         notify:true}

    }
  }
 static get observers() { return [ 'checkUserNApi(username,apiKey)']}

  checkUserNApi(u,a){
      if (u && a) this.$.ajax.generateRequest();
  }
  checkResponce(d) {
      if (d) {
          this.set('data',d); //with this method data property at parent will change upon you received responce
      }  
  }

最后，如果您想查看错误报告，可以添加到iron-ajax 一行。check error on-error="{{error}}"

演示

Answer 2

数据属性需要设置为通知。

 data: {
   type: Object,
   notify: true
 }