聚合物模板重復不起作用

Question

我已經創建了一個自定義元素，並且在根template上設置了repeat屬性似乎沒有任何效果。

<link rel="import" href="/components/polymer/polymer.html">
<polymer-element name="cr-tracks">
    <template repeat="{{track in tracks}}">
        {{foo}}
        {{track.title}}
    </template>

    <style>

    </style>

    <script>
        Polymer('cr-tracks', {
            ready: function() {
                this.tracks = [
                    {
                        title: "Example Title",
                        artist: "Example Artist"
                    }
                ];
            },
            foo: 'bar'
        })
    </script>
</polymer-element>

bar ，顯示foo的值，但track.title不會呈現任何track.title 。 我可以直接通過tracks[0].title訪問它。

Answer 1

您缺少特殊的外部模板。 Polymer通過將模型設置為元素實例本身來設置外部模板。

嘗試這個：

<polymer-element name="cr-tracks">
  <template>

    <template repeat="{{track in tracks}}">
      {{foo}}
      {{track.title}}
    </template>

    <style>
    </style>

  </template>
  <script>
    ...
  </script>
</polymer-element>