聚合物 - 在自定義元素內創建自定義元素的列表

Question

我想讓我的頭繞聚合物。現在我已經成功地創建了一個自定義新聞元素（my-newsbite），並且可以從調用自定義元素的頁面填充和顯示屬性數據。

下一步是創建第二個自定義元素（my-newsbite-list），它從調用頁面中的屬性獲取json對象形式的多個新聞項目，並顯示my-newsbite自定義列表元素。

由於某種原因，我無法使其工作。

我的測試index.php頁面調用我-newsbite列表這樣的...

<div style="width:200px;"> 
    <my-newsbite-list news="[{title: 'title here',date:'12 July 2014',content:'content here',url:'http://www.frfrf.com'}]"> 
    </my-newsbite-list> 
</div> 

的我的newsbite列表自定義元素看起來像這樣...

<link rel="import" href="../components/bower_components/polymer/polymer.html"> 

<polymer-element name="my-newsbite-list" attributes="news" > 

<template > 

    <template repeat="{{item in news}}"> 

     <my-newsbite title="item.title" date="item.date" content="item.content" url="item.url"> 
     </my-newsbite> 

    </template> 

</template> 

    <script> 
    Polymer('my-newsbite-list', { 
     created: function() {   
      this.news = []; // Initialize and hint type to an object.   
     }  
    }); 
    </script> 
</polymer-element> 

最後我的自定義元素我-newsbite看起來像這樣...

<link rel="import" href="../components/bower_components/polymer/polymer.html"> 


<polymer-element name="my-newsbite" attributes="title date content url width"> 

    <template> 

    <div class="my-newsbite-title"> 
    {{title}} 
    <div class="my-newsbite-date">{{date}}</div> 
    </div> 

    <div class="my-newsbite-content">{{content}}...</div> 
    <div class="my-newsbite-url"><a href="{{url}}">more...</a></div> 

    <style> 
     :host { 
     /* Note: by default elements are always display:inline. */ 
     display: block; 
     background-color:#FFFFFF; 
     font-fam 
     } 
     .my-newsbite-title { 
     /* Note: by default elements are always display:inline. */ 
     display: block; 
     background-color:#06F; 
     color:white; 
     padding:3px; 
     } 
     .my-newsbite-content{ 
      padding:3px; 
     } 
     .my-newsbite-date{ 
      padding:3px; 
      font-size:8pt; 
      text-align:right; 
      float:right; 
     } 
     .my-newsbite-url{ 
      padding:3px; 
     } 



    </style> 

    </template> 

    <script> 
    Polymer('my-newsbite', { 
    title: "****", 
    date: "****", 
    content: "****...", 
    url: "http://****.com",  
    }); 
    </script> 

</polymer-element> 

所有這一切的最終結果是呈現不知疲倦空白x頁面。

任何人都可以看到爲什麼json對象不會在my-newsbite-list自定義元素中呈現嗎？

在此先感謝。

Answer 1

我已經試過ebidel的建議，但沒有解決它。

斯科特·邁爾斯是正確的......

聚合物是關於屬性通過JSON格式非常挑剔。 （我不知道如何給你評分的答案）

因此，在index.php頁面中的代碼看起來像這樣（注意圍繞鍵名和值的雙引號） ...

<my-newsbite-list news='[{"title":"sdfg","date":"12 July 2014","content":"sdfg sdfg sdfg sdfg sdfg sdfg sdf","url":"http://www.frfrf.com"}]'> 
</my-newsbite-list> 

的自定義元素聚合物的JavaScript看起來像這樣...

Polymer('my-newsbite-list', { 
news: [], 
    ready: function(){   
    } 
}); 

感謝所有的建議。

Answer 2

問題似乎在於自定義元素接收調用屬性中的json對象的方式。將以下代碼添加到聚合物就緒功能可以解決問題。

Polymer('my-newsbite-list', {  
    ready: function(){ 
     this.news = eval(this.news) || []; 
    } 
}); 

該解決方案可行，但上述答案中顯示了正確的方法。