使用 Polymer 模板重复的重复值

Question

好的，我的聚合物模板发生了一件奇怪的事情

<polymer-element name="my-playlist" attributes="info">
    <template>
        <core-ajax url="/getlist" method="POST" auto response="{{data}}" handleAs="json">
        </core-ajax>
        
        <style>
        </style>
        <core-selector class="list">
            <template repeat="{{k in data}}">
                <core-ajax url="http://api.soundcloud.com/tracks/{{k.track}}.json?client_id=9a6dccd301f1d1cbab751e0a1ec82e2e" method="GET" auto response="{{response}}" handleAs="json">
                </core-ajax>
                <div class="item">
                    {{response.genre}}
                </div>
            </template>
        </core-selector>
    </template>
    <script>
        Polymer();
    </script>
</polymer-element>

我从中得到的是我收到的其中一个回复的重复。我得到了三个正确的条目，但 {{response.genre}} 重复了 ajax 调用的响应之一，而不是正确列出每个响应。我的结果如下：

R&B
R&B
R&B

它应该是这样的：

说唱
R&B
爵士乐

我似乎提出了所有正确的请求，但模板是 - 我如何正确处理每个响应，所以我列出所有响应而不是复制一个值？

任何帮助都会很棒。

Answer 1

问题是 response 被视为全局变量，因此每次您运行通过 repeat 时，它都会覆盖它。作为解决方案，您应该绑定到每次重复都会改变的东西。

<template repeat="{{k in data}}">
    <core-ajax url="http://api.soundcloud.com/tracks/{{k.track}}.json?client_id=9a6dccd301f1d1cbab751e0a1ec82e2e" method="GET" auto response="{{k.response}}" handleAs="json">
    </core-ajax>
    <div class="item">
      {{k.response.genre}}
    </div>
</template>

使用 Polymer 模板重复的重复值

Duplicate values with Polymer template repeat

templates

repeat

web-component

polymer