CODEWITHSUNDEEP
dompolymerweb-component
Shai Balassiano
Shai Balassiano

Reputation: 1007

Polymer: passing attributes from container component to an item component

I have 2 components: x-container and x-item. they have a hierarchy similar to < table > and < tr > or to < tr > and < td >... Hence x-item components are only effective when they're inside an x-container component:

<x-container>
    <x-item></x-item>
</x-container>

I want to pass an attribute value from x-container to x-item:

<x-container att="value">
    <x-item></x-item>
</x-container>

In this case I need value to be visible to x-item - is it possible? Thanks!

Upvotes: 1

Views: 1728

Answers (1)

&#220;mit
&#220;mit

Reputation: 17489

It works out of the box if you know the structure of x-container beforehand (JSBin): 

<polymer-element name="x-container" attributes="value">
  <template>
    <x-item value="{{value}}"></x-item>
  </template>
  <script>
    Polymer('x-container', {
      value : null,
      ready: function() {
      }
    });
  </script>
</polymer-element>

<polymer-element name="x-item" attributes="value">
  <template>
    <div>x-item value:{{value}}</div>
  </template>
  <script>
    Polymer('x-item', {


    });
  </script>
</polymer-element>

<x-container value="test"></x-container>

If you want to dynamically create the relationship of x-container and x-item refer to these SO threads:

Data-binding between nested polymer elements

Using template defined in light dom inside a Polymer element

What is the best way to implement declarative collection rendering with Polymer?

Upvotes: 1

Related Questions