Question

我使用Polymer放置了一个自定义元素 - <x-flickr>（http://tamas.io/x-flickr-custom-polymer-element/ || https://github.com/tamaspiros/x-flickr） - 它实际上是对Flickr API进行REST调用并根据搜索返回照片：

<polymer-jsonp id="ajax" auto url="http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key={{apikey}}&tags={{tag}}&per_page={{amount}}&page=1&format=json&jsoncallback="></polymer-jsonp>

此调用会返回有关特定照片的一些信息，但不会返回所有内容。我想重用通过此调用返回的唯一ID，并进行第二次REST调用以获取有关该图像的更多详细信息。目前我通过以下方式显示照片：

<template  id="photos" repeat="{{photo in photos}}">
  <div class="thumbnail">
    <img src="http://farm{{photo.farm}}.staticflickr.com/{{photo.server}}/{{photo.id}}_{{photo.secret}}.jpg" class="img-thumbnail">
   </div>
 </template>

但是我想扩展它以便我也得到照片的描述（这是上面显示的第一个REST调用没有返回的信息） - 所以我的模板看起来像这样：

    <template  id="photos" repeat="{{photo in photos}}">
      <div class="thumbnail">
        <img src="http://farm{{photo.farm}}.staticflickr.com/{{photo.server}}/{{photo.id}}_{{photo.secret}}.jpg" class="img-thumbnail">
<p>{{photo.description}}</p> <!-- this should come from the 2nd API call -->
       </div>
     </template>

实现这一目标的最佳方式是什么？

Answer 1

我分叉了您的项目，以便您可以在此处查看我将要描述的详细信息https://github.com/sjmiles/x-flickr。

您的问题的简短回答是在模板重复中包含请求元素（polymer-ajax）。这会导致请求为重复中的每个项目生成，并使您可以轻松访问项目数据（在这种情况下为照片ID）。

正如我所提到的，您可以在此处看到如何在源代码中完成此操作的示例：https://github.com/sjmiles/x-flickr/blob/master/x-flickr.html#L46。

其他几点说明：

这些请求不需要JSONP，简单的Ajax调用就可以，您可以直接访问JSON。我使用polymer-ajax代替polymer-jsonp。
您几乎不需要Polymer中的addEventListener因为您可以直接在HTML中使用on-<eventName>="methodName"语法来侦听事件。在这种情况下，您根本不需要使用事件，因为您可以使用数据绑定来完成工作。
这可以完全免于脚本，但我保留了脚本以设置photos属性并发送x-flickr-load事件。

HTH

Answer 2

解决此问题的一种方法：http://jsbin.com/yihovepi/1/edit（还包括一些重构）

<p>{{photo.description}}</p>始终位于模板中，但稍后会为每张照片动态创建.description来填充<polymer-jsonp>。

注意，我也使用绑定到主要聚合物-jsonp元素的response属性：

<polymer-jsonp id="ajax" response="{{response}}">

这是超级更改，因为从请求填充该值时会调用相应的responseChanged()回调。

Polymer Custom Element中的多个API调用

2 个答案: