Javascript 8跟踪聚合物不起作用的API自定义元件

我正在尝试使用聚合物为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>

所有的混音都是这样，但你明白了

---

我知道我很可能把标签搞糟了，但我才刚刚开始使用API/Web组件，所以任何帮助都会非常棒

聚合物的一个关键特征是其数据绑定和强调问题的声明性解决方案。在本例中，您可以指示polymer jsonp元素将响应放置在变量中，然后以声明方式将其连接到模板中

<polymer-jsonp response="{{response}}" ...></polymer-jsonp>
<template repeat="{{item, index in response.mix_set.mixes}}">...</template>

---

有一个硬编码的响应来显示它是有效的，如果您插入API密钥（尽管您可能不希望在jsbin:-）这应该对您有效。

我认为第二个示例不起作用。您必须在

onResponse

回调中设置

this.response=e.detai.response.data

。触发事件不会激活数据绑定。

八轨加载

事件适用于许多希望知道八轨已加载的任何外部方。对于这个例子，它是完全可选的<代码>此。响应未在此处设置。它由

polymer jsonp

设置，因为我将其

response

属性设置为

{{response}

。啊，好的，我错过了那部分。但是您不应该访问模板中的

response.data.mix\u set

，而不是

response.mix\u set

？这很好。我想这完全取决于反应到底是什么样的。从他的复制粘贴来看，响应中似乎没有

data

属性，但他的代码似乎是这样假设的。嘿，克莱图索，谢谢你的帮助！我已经做了以下工作：，但是在JS控制台中得到了一个“uncaughtSyntaxerror:Unexpected token:”？

<polymer-jsonp response="{{response}}" ...></polymer-jsonp>
<template repeat="{{item, index in response.mix_set.mixes}}">...</template>

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