javascript - polymer 模板重复不起作用

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没有渲染。我可以通过 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>