多个API调用元

我已经把使用聚合物自定义元素 - <x-flickr>（http://tamas.io/x-flickr-custom-polymer-element/ || https://github.com/tamaspiros/x-flickr） - 它实质上由REST调用Flickr的API，并返回基于搜索的照片：多个API调用元

<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>

什么是实现这一目标的最佳途径？解决这个

来源

2014-02-20 Tamas

我分叉你的项目，所以你可以看到我要在这里描述的细节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。
聚合物中几乎不需要addEventListener，因为您可以直接在HTML中使用on-<eventName>="methodName"语法来收听事件。在这种情况下，根本不需要使用事件，因为您可以使用数据绑定来完成工作。
这可以完全无脚本地完成，但是我保留了用于设置photos属性并发送x-flickr-load事件的脚本。

HTH

来源

2014-02-20 05:45:14

斯科特 - 谢谢。有趣的是，对于同一个问题，有两种截然不同的解决方案 - 一种是脚本，另一种是没有。我真的不知道接受哪个答案 - 我都喜欢。感谢您的详细解释 - 有这种支持真的很棒。 – Tamas

一种方法：http://jsbin.com/yihovepi/1/edit（也包括一些重构）

的<p>{{photo.description}}</p>总是在模板，但.description由每张照片动态创建<polymer-jsonp>后填补。

注意，我还使用结合到主聚合物JSONP元素的response属性：

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

这是超级改变，因为当值从请求填入对应responseChanged()回调被调用。

来源

2014-02-20 01:31:28 ebidel

埃里克，同样的赞美出去你还有 - 感谢您的及时答复，我喜欢你的解决方案。鉴于这两个独特的答案，哪种方式最好？脚本或非脚本方式？ – Tamas

谢谢。聚合方式是声明方式。上面的斯科特的文章很好地捕捉了这一点。与网络平台上的所有内容一样，有许多方法可以使猫受到伤害。我们可以同时展示这两点很棒。 – ebidel

确实。我将不得不接受一个解决方案，我会接受他的 - 但不要采取这种错误的方式 - 我也喜欢你的解决方案 - 它很好地向我展示了如何在聚合物中使用脚本。保持良好的工作家伙！ – Tamas

多个API调用元

回答

相关问题