我想讓我的頭繞聚合物。現在我已經成功地創建了一個自定義新聞元素(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自定義元素中呈現嗎?
在此先感謝。
我看到錯誤的一件事是你沒有在模板標籤中正確添加:'
badsyntax
感謝badsyntax,您對{{}}的需求是正確的。有時我想念那些明顯的事情,但是,這並沒有解決問題。我仍然得到一個空白的呈現頁面。 – Craig