用铁ajax递归调用? [英] 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.
这是仅列出ID的工作代码:
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>
我尝试了一些操作，包括在该模板中使用不同的URL("/tickets/" + {{item.id}})创建了新的iron-ajax和template，但是我认为这与正确的方法并不相近.我在DOM中得到的只是一个具有#document-fragment
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
那么我如何获得/tickets/20，/tickets/21等的详细信息?
So how can I get the details for /tickets/20, /tickets/21, etc?
推荐答案
可以在dom-repeat模板中使用iron-ajax声明性地执行请求(如您所述).
It's possible to do the requests declaratively, using iron-ajax within a dom-repeat template (as you mentioned).
下面的示例检索包含单词polymer的书籍列表，然后检索到每个书籍的链接.
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>
这里是同一示例的JS Bin.如果尝试运行太多，可能会得到403s ...
Here's a JS Bin to the same example. You may get 403s if you try to run this too much...
更新
a1626 询问是否可以使用一个iron-ajax元素来处理所有请求.这也是可能的.
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>
这篇关于用铁ajax递归调用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
