我正在尝试使用 Polymer 为 8Tracks API 制作自定义元素，并尝试获取用户的混音并显示他们的封面。我尝试按如下方式执行此操作:
<link rel="import" href="../bower_components/polymer-jsonp/polymer-jsonp.html">
<polymer-element name="eight-tracks">
<template>
<polymer-jsonp id="ajax" auto url="https://8tracks.com/users/1/mixes.json?api_key=MY_API_KEY?api_version=3&callback=?"></polymer-jsonp>
<div class="instagram">
<template id="mixes" repeat="{{item in mixes}}" index="i">
<div id="{{item.index}}" class="item">
<img src="{{mixes.cover_urls.sq200}}">
</div>
</template>
</div>
</template>
<script>
Polymer('eight-tracks', {
ready: function () {
this.$.mixes.model = this.mixes;
this.$.ajax.addEventListener('polymer-response',
function (e) {
this.mixes = {mixes: e.detail.response.data};
this.$.mixes.model = {mixes: e.detail.response.data};
this.fire('eight-tracks-load', {response: e.detail.response.data});
}.bind(this)
);
}
});
</script>
</polymer-element>
我正在尝试在 x-instagram 和 x-flickr 上对其进行建模，但收效甚微。我对这一切都很陌生，所以任何指导将不胜感激。我知道 JSON/API 调用正在工作，因为我在控制台中得到了它:
{
"mix_set": {
"pagination": {
"current_page": 1,
"per_page": 12,
"offset_by": 0,
"next_page": 2,
"previous_page": null,
"total_entries": 31,
"total_pages": 3
},
"mixes": [
{
"id": 679109,
"path": "/mixes/679109",
"web_path": "/remi/chill-hip-hop-beats-part-2",
"name": "Chill Hip-Hop Beats (part 2)",
"user_id": 1,
"published": true,
"cover_urls": {
"sq56": "http://8tracks.imgix.net/i/001/067/826/68609.original-9904.jpg?fm=jpg&q=65&w=56&h=56&fit=crop",
"sq100": "http://8tracks.imgix.net/i/001/067/826/68609.original-9904.jpg?fm=jpg&q=65&w=100&h=100&fit=crop",
"sq133": "http://8tracks.imgix.net/i/001/067/826/68609.original-9904.jpg?fm=jpg&q=65&w=133&h=133&fit=crop",
"max133w": "http://8tracks.imgix.net/i/001/067/826/68609.original-9904.jpg?fm=jpg&q=65&w=133&fit=max",
"max200": "http://8tracks.imgix.net/i/001/067/826/68609.original-9904.jpg?fm=jpg&q=65&w=200&h=200&fit=max",
"sq250": "http://8tracks.imgix.net/i/001/067/826/68609.original-9904.jpg?fm=jpg&q=65&w=250&h=250&fit=crop",
"sq500": "http://8tracks.imgix.net/i/001/067/826/68609.original-9904.jpg?fm=jpg&q=65&w=500&h=500&fit=crop",
"max1024": "http://8tracks.imgix.net/i/001/067/826/68609.original-9904.jpg?fm=jpg&q=65&w=1024&h=1024&fit=max",
"original_imgix_url": "http://8tracks.imgix.net/i/001/067/826/68609.original-9904.jpg?q=65&sharp=15&vib=10&fm=jpg&fit=crop",
"original": "http://8tracks.imgix.net/i/001/067/826/68609.original-9904.jpg?q=65&sharp=15&vib=10&fm=jpg&fit=crop",
"animated": false
},
"description": "More beats to relax and lounge to\nSequel to http://8tracks.com/remi/laid-back-hip-hop-beats \n",
"plays_count": 1013,
"tag_list_cache": "hip-hip, lounge, beats, chill, smoke",
"first_published_at": "2012-03-26T19:11:15Z",
"first_published_at_timestamp": 1332789075,
"likes_count": 111,
"certification": "gold",
"duration": 2211,
"tracks_count": 8
},
...
}
这对于所有混音都是如此，但你明白了。
我知道我很可能搞砸了标签，但我才刚刚开始使用 API/Web 组件，所以任何帮助都会很棒。
最佳答案
Polymer 的主要特征之一是它的数据绑定(bind)和强调问题的声明式解决方案。在您的情况下，您可以指示polymer-jsonp 元素将响应放入变量中，然后以声明方式将其连接到您的模板中。
<polymer-jsonp response="{{response}}" ...></polymer-jsonp>
<template repeat="{{item, index in response.mix_set.mixes}}">...</template>
然后您可以使用 Polymer 的 declarative event mapping连接您的响应处理程序(为任何可能想知道的外部监听器触发 eight-tracks-loaded 事件)。
<polymer-jsonp on-polymer-response="{{onResponse}}" ...></polymer-jsonp>
<script>
Polymer('eight-tracks', {
...
onResponse: function(e) {
this.fire('eight-tracks-load', {response: e.detail.response});
}
});
</script>
Here's a working jsbin用硬编码响应来表明它有效，并且 here's one without the hard-coded response如果您插入 API key ，这应该对您有用(尽管您可能不希望在 jsbin 上使用它:-)
关于javascript - 8Tracks API 自定义元素与 Polymer 不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23825973/