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：将属性传递给子元素不起作用

的index.html

数据component.html

2 个答案: