Question

我试图了解聚合物。现在我已成功创建了一个自定义新闻元素（my-newsbite），可以从调用自定义元素的页面填充和显示属性数据。

下一步是创建第二个自定义元素（my-newsbite-list），它从调用页面中的属性中获取json对象形式的多个新闻项，并显示my-newsbite自定义元素的列表

出于某种原因，我无法让它发挥作用。

我的测试index.php页面调用了my-newsbite-list，就像这样...

<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>

my-newsbite-list自定义元素看起来像这样......

<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>

最后我的自定义元素my-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>

所有这一切的最终结果是一个空白的渲染索引页。

有人能看出为什么json对象没有在my-newsbite-list自定义元素中呈现？

提前致谢。

Answer 1

问题似乎在于自定义元素接收调用属性中的json对象的方式。将以下代码添加到Polymer ready函数可以解决此问题。

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

此解决方案确实有效，但上面的答案中显示了正确的方法。

Answer 2

我已经尝试过ebidel的建议但是没有解决它。

斯科特迈尔斯是正确的......

Polymer对于在属性中传递的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>

自定义元素Polymer javascript看起来像这样......

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

感谢所有建议。

Polymer - 在自定义元素中创建自定义元素的列表

2 个答案: