2014-07-02 278 views
1

我想讓我的頭繞聚合物。現在我已經成功地創建了一個自定義新聞元素(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自定義元素中呈現嗎?

在此先感謝。

+0

我看到錯誤的一件事是你沒有在模板標籤中正確添加:' badsyntax

+0

感謝badsyntax,您對{{}}的需求是正確的。有時我想念那些明顯的事情,但是,這並沒有解決問題。我仍然得到一個空白的呈現頁面。 – Craig

回答

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(){   
    } 
}); 

感謝所有的建議。

+0

謝謝克雷格你的問題和答案真的很有幫助。 –

1

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

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

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

+0

你不應該需要'eval()'。如果你只是提示'ready:function(){this.news = []; '',它工作嗎? – ebidel

+0

字符串化的對象必須是有效的JSON才能被解析。所有密鑰都必須加引號,而且只能使用雙引號。 '[{「title」:「title here」,「date」:「2014年7月12日」,「content」:「content here」,「url」:「http://www.frfrf.com」}] 。 http://jsonlint.com/ –

+0

感謝ebidel,已經嘗試過了。斯科特邁爾斯評論是正確的,答案已更新。 – Craig

相關問題