聚合物：将属性传递给子元素不起作用

Question

我正在尝试从 <data-component> 中的自定义 Polymer 组件 <iron-list> 输出数据，但是当我打开页面时没有显示任何内容。当我将对象数组直接传递给 <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>

Answer 1

您还必须向 data-component 添加数据绑定。否则，系统不知道 data（在您的 iron-list 中）应该引用您自定义元素中的 data 属性。

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

如果你想在 Polymer 元素之外进行数据绑定，dom-bind 是必需的，这里似乎就是这种情况。

您还应确保 data 属性配置为通知更改，并且其类型设置为 Array。

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

Answer 2

我将针对我已经发布的内容提出替代答案。如果您希望 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>

聚合物：将属性传递给子元素不起作用

Polymer: Passing properties to child element doesn't work

html

web-component

polymer

polymer-1.0

index.html

数据-component.html