Recursive calls with iron-ajax?

问题

I suspect I'm way off here, but essentially I'm trying to retrieve a list of tickets and then the details for each ticket. I have the first part working, but when I tried to add the "recursive" part it's just failing.

This is the working code that just lists ids:

<template is="dom-bind" id="app">

    <iron-ajax auto
               url="https://<mydomain>.freshdesk.com/api/v2/tickets"
               headers='{ "user": "<apikey>", "pass": "X", "sendImmediately": "true" }'
               handle-as="json"
               method="GET"
               last-response="{{ticketList}}"
               with-credentials></iron-ajax>

    <template is="dom-repeat" items="[[ticketList]]">
        <div class="ticket">{{item.id}}</div>
    </template>

</template>

I tried a few things including a new iron-ajax and template within that template with a different URL ("/tickets/" + {{item.id}}) but I don't think that's even close to the right approach. All I get in the DOM is a template element that has #document-fragment

So how can I get the details for /tickets/20, /tickets/21, etc?

回答1:

It's possible to do the requests declaratively, using iron-ajax within a dom-repeat template (as you mentioned).

The example below retrieves a list of books containing the word polymer and then retrieves the links to each of the books.

<!doctype html>
<html>

<head>
  <meta name="description" content="https://stackoverflow.com/questions/37817472">
  <meta charset="utf-8">
  <base href="http://polygit.org/components/">
  <script href="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link href="polymer/polymer.html" rel="import">
  <link href="iron-ajax/iron-ajax.html" rel="import">
</head>

<body>
  <dom-module id="my-el">
    <template>
      <!-- get list of book titles that include the word "polymer" -->
      <iron-ajax id="ajax"
                 url="https://www.googleapis.com/books/v1/volumes?q=polymer"
                 handle-as="json"
                 last-response="{{response}}" auto></iron-ajax>
      <template is="dom-repeat" items="[[response.items]]">
        <!-- get links to the list of books from previous iron-ajax --> 
        <iron-ajax id="ajax"
                   url="{{url(item.id)}}"
                   handle-as="json"
                   on-response="onResponse"
                   auto></iron-ajax>        
      </template>
    </template>
    <script>
      Polymer({
        is: 'my-el',
        properties: {
          response: {
            type: String,
            notify: true
          }
        },
        onResponse: function(e) {
          var p = document.createElement('p');
          p.textContent = e.target.lastResponse.selfLink;
          Polymer.dom(this.root).appendChild(p);
        },
        url: function(id) {
          return "https://www.googleapis.com/books/v1/volumes/" + id;
        }
      });
    </script>
  </dom-module>
  <my-el></my-el>
</body>

</html>

Here's a JS Bin to the same example. You may get 403s if you try to run this too much...

http://jsbin.com/jijehus/5/edit?html,output

Update

a1626 asked about whether you can use one iron-ajax element to handle all of the requests. This is possible, too.

<!doctype html>
<html>
<head>
  <meta name="description" content="https://stackoverflow.com/questions/37817472">
  <meta charset="utf-8">
  <base href="https://polygit.org/components/">
  <script href="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link href="polymer/polymer.html" rel="import">
  <link href="iron-ajax/iron-ajax.html" rel="import">
</head>
<body>
  <dom-module id="my-el">
    <template>
      <iron-ajax id="ajax"
                 url="https://www.googleapis.com/books/v1/volumes?q=polymer"
                 handle-as="json"
                 on-response="onResponse"
                 last-response="{{response}}" auto></iron-ajax>
    </template>
    <script>
      Polymer({
        is: 'my-el',
        properties: {
          response: {
            type: Object,
            notify: true
          },
          queue: {
            type: Array,
            notify: true,
            value: function() { return []; }
          }
        },
        onResponse: function(e) {
          var ajax = this.$.ajax;
          var originalUrl = 'https://www.googleapis.com/books/v1/volumes?q=polymer';
          var url = ajax.lastRequest.xhr.responseURL;
          if (url.includes(originalUrl)) {
            console.log('this is the first request');
            for (var i = 0; i < ajax.lastResponse.items.length; i++) {
              this.push('queue', ajax.lastResponse.items[i].id);
            }
            ajax.url = this.url(this.pop('queue'));
          } else {
            console.log(ajax.lastResponse.selfLink);
            ajax.url = this.url(this.pop('queue'));
          }
        },
        url: function(id) {
          return "https://www.googleapis.com/books/v1/volumes/" + id;
        }
      });
    </script>
  </dom-module>
  <my-el></my-el>
</body>
</html>

https://jsbin.com/beyawe/edit?html,console

来源：https://stackoverflow.com/questions/37817472/recursive-calls-with-iron-ajax

标签

jquery

ajax

recursion

polymer