Polymer 聚合自定义元素内的多个API调用

我使用Polymer创建了一个自定义元素-| |-它基本上对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>

实现这一点的最佳方法是什么？

解决这一问题的一种方法：还包括一些重构

{{photo.description}}

始终在模板中，但是.description稍后会通过为每个照片动态创建来填充

注意，我还使用绑定到主聚合物jsonp元素的响应属性：

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

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

解决此问题的一种方法是：还包括一些重构

{{photo.description}}

始终在模板中，但是.description稍后会通过为每个照片动态创建来填充

注意，我还使用绑定到主聚合物jsonp元素的响应属性：

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

---

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

我为您的项目提供了分支，以便您可以看到我将在此处描述的详细信息

对您的问题的简短回答是在模板repeat中包含一个request元素。这将导致在repeat中为每个项目生成一个请求，并使您能够轻松访问项目数据（在本例中为photoid）

正如我提到的，您可以在这里的源代码中看到一个如何实现这一点的示例：

其他一些注意事项：

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

---

HTH

我为您的项目提供了分支，这样您就可以看到我将在这里描述的内容的细节

对您的问题的简短回答是在模板repeat中包含一个request元素。这将导致在repeat中为每个项目生成一个请求，并使您能够轻松访问项目数据（在本例中为photoid）

正如我提到的，您可以在这里的源代码中看到一个如何实现这一点的示例：

其他一些注意事项：

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

---

HTH

斯科特-谢谢你。有趣的是，对于同一个问题，有两种截然不同的解决方案——一种是使用脚本，另一种是不使用脚本。老实说，我不知道该接受哪一个答案——我两个都喜欢。谢谢你的详细解释-能得到这样的支持真是太好了。斯科特-谢谢。有趣的是，对于同一个问题，有两种截然不同的解决方案——一种是使用脚本，另一种是不使用脚本。老实说，我不知道该接受哪一个答案——我两个都喜欢。谢谢你的详细解释，能得到这样的支持真是太好了。埃里克，同样的赞扬也会转达给你，谢谢你的及时回复，我喜欢你的解决方案。根据这两个截然不同的答案，哪种方式是最好的？脚本方式还是非脚本方式？谢谢。聚合方式，是声明方式。斯科特在上面的帖子很好地抓住了这一点。与web平台上的所有内容一样，有许多方法可以剥猫皮。很好，我们两个都能展示出来。我将不得不接受一个解决方案，我将接受他的解决方案-但不要误会-我也喜欢你的解决方案-它很好地向我展示了如何在聚合中使用脚本。继续努力，伙计们！顺便说一句，声明性方法的一个很好的特性是模板重复是稳定的。换句话说，如果从照片中添加/删除/修改记录，模板将仅在DOM中生成必要的更改，并且不会重新请求elemen的数据

---

你已经有了。话虽如此，有时您可能需要使用JavaScript来完成额外的工作，因此您是对的，有Eric的命令式技术示例也很好。Eric，同样的赞扬也会对您产生影响-感谢您的及时回复，我喜欢您的解决方案。根据这两个截然不同的答案，哪种方式是最好的？脚本方式还是非脚本方式？谢谢。聚合方式，是声明方式。斯科特在上面的帖子很好地抓住了这一点。与web平台上的所有内容一样，有许多方法可以剥猫皮。很好，我们两个都能展示出来。我将不得不接受一个解决方案，我将接受他的解决方案-但不要误会-我也喜欢你的解决方案-它很好地向我展示了如何在聚合中使用脚本。继续努力，伙计们！顺便说一句，声明性方法的一个很好的特性是模板重复是稳定的。换句话说，如果从照片中添加/删除/修改记录，模板将仅在DOM中生成必要的更改，并且不会重新请求已有元素的数据。话虽如此，有时您可能需要使用JavaScript来完成额外的工作，因此您是对的，有Eric的命令式技术示例也很好。