聚合物模板重複不起作用

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-element name="cr-tracks"> 
    <template> 

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

    <style> 
    </style> 

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