聚合物：將屬性傳遞給子元素不起作用

我試圖從<iron-list>中的自定義聚合物組件<data-component>輸出數據，但是當我打開該頁面時沒有顯示任何內容。它工作時，我直接傳遞一個對象的數組，如<iron-list items='[{"name": "test1"}, {"name":"test2"}]' >聚合物：將屬性傳遞給子元素不起作用

我在做什麼錯在這裏，是<template is="dom-bind" id="t">強制性的？

的index.html

<html> 
    <head> 
    <script src="../../webcomponentsjs/webcomponents-lite.js"></script> 
    <link rel="import" href="../data-component.html"> 
    <link rel="import" href="../../iron-list/iron-list.html">  
    </head> 

    <body unresolved> 
     <template is="dom-bind" id="t"> 
      <data-component> 
       <!--<iron-list items='[{"name": "test1"}, {"name":"test2"}]' > WORKS --> 
       <iron-list items="{{data}}" > 
        <template> 
         <div> 
          Name: <span>{{item.name}}</span> 
         </div> 
        </template> 
       </iron-list> 
     </data-component> 
     </template> 
    </body> 
</html>

數據component.html

<link rel="import" href="../polymer/polymer.html"> 
<dom-module id="data-component"> 

    <template> 
    <content></content> 
    </template> 
</dom-module> 
<script> 
window.coolData = [ 
    {"name": "Bob"}, 
    {"name": "Tim"}, 
    {"name": "Mike"} 
]; 


    Polymer({ 
    is: 'data-component', 
    properties: { 
      data: { 
       value: window.coolData 
      } 
     } 
    }); 
</script>

來源

2015-11-26 Hedge

你必須指定數據類型'的類型：Array' –

@PascalGula好點。我會將其添加到我的答案中。 – Maria

你是通過內容標籤插入'iron-list'還是你也可以放置在'data-component'的本地dom中？第二種方法可以讓你擺脫'dom-bind'。 – Maria

我打算爲我已經發布的內容提供一個備選答案。如果你想讓你的data-component始終包含iron-list那麼你可以在這裏使用這個版本。但是，如果data-component的內容應該更加靈活，請使用我的其他答案。

如果您將iron-list移至data-component之內，則可以刪除index.html中的dom-bind。

數據component.html

<link rel="import" href="../polymer/polymer.html"> 
<dom-module id="data-component"> 

    <template> 
     <iron-list items="{{data}}" > 
      <template> 
       <div> 
        Name: <span>{{item.name}}</span> 
       </div> 
      </template> 
     </iron-list> 
    </template> 
</dom-module> 
<script> 
window.coolData = [ 
    {"name": "Bob"}, 
    {"name": "Tim"}, 
    {"name": "Mike"} 
]; 


Polymer({ 
    is: 'data-component', 
    properties: { 
      data: { 
       type: Array, 
       value: window.coolData 
      } 
     } 
    }); 
</script>

的index.html

<body unresolved> 
    <data-component></data-component> 
</body>

來源

2015-11-26 17:47:13 Maria

Wow @Maria。當我不確定我是否從正確的方面處理問題時，我總是希望得到一些有見地的答案，就像你在這裏提供的一樣。 – Hedge

您還可以添加一個數據綁定到你的data-component。否則，系統不知道data（在您的iron-list中）應該參考自定義元素中的data屬性。

<data-component data="{{data}}"> 
    <iron-list items="{{data}}" > 
     ... 
    </iron-list> 
</data-component>

的dom-bind如果你想有一個聚合物元件，這似乎是在這裏的情況下數據綁定外是必要的。

您還應該確保將data屬性配置爲通知更改並且其類型設置爲Array。

Polymer({ 
    is: 'data-component', 
    properties: { 
     data: { 
      type: Array, 
      value: window.coolData, 
      notify: true 
     } 
    } 
});

來源

2015-11-26 14:57:18 Maria

聚合物：將屬性傳遞給子元素不起作用

的index.html

數據component.html

回答

相關問題