CODEWITHSUNDEEP
htmlpolymerpolymer-1.0web-component
Hedge
Hedge

Reputation: 16748

Polymer: Passing properties to child element doesn't work

I'm trying to output data from a custom Polymer component <data-component> in an <iron-list> but nothing is shown when I open the page. It works when I pass an array of objects directly to the iron-list like <iron-list items='[{"name": "test1"}, {"name":"test2"}]' >

What am I doing wrong here and is the <template is="dom-bind" id="t"> mandatory?

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>

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

Upvotes: 2

Views: 2402

Answers (2)

Maria
Maria

Reputation: 5604

I'm going to suggest an alternative answer to what I have already posted. If you want your data-component to always contain the iron-list then you can use this version here. However, if the content of the data-component should be more flexible use my other answer.

If you move the iron-list inside the data-component you can remove the dom-bind in your index.html.

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

Upvotes: 3

Maria
Maria

Reputation: 5604

You also have to add a data-binding to your data-component. Otherwise, the system does not know that data (in your iron-list) should refer to the data property in your custom element.

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

The dom-bind is necessary if you want to have data-binding outside of a Polymer element, which seems to be the case here.

You should also make sure that the data property is configured to notify changes and that its type is set to Array.

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

Upvotes: 3

Related Questions