CODEWITHSUNDEEP
polymerpolymer-2.x
Rashomon
Rashomon

Reputation: 6762

Using a pair of Polymer Component twice in the same page doesnt work

Im new to Polymer. Im using two different Polymer components that communicates with each other. I have to do it twice (2 x 2 components).

The following code uses just one pair of different components and it works:

<dom-bind id="dombind">
  <template is="dom-bind">

    <polymer-componentA id="polymercomponentA_1" 
        attribute="[[x]]" 
        attribute="[[x]]" 
        attribute="{{x}}">  
    </polymer-componentA>
    <polymer-componentB id="polymer-componentB_1"
        attribute="{{x}}"> 
    </polymer-componentB>

  </template>
</dom-bind>

But when I add other pair of components, it starts working bad. I think they use the same component (instead of being independent):

<dom-bind id="dombind">
  <template is="dom-bind">

    <polymer-componentA id="polymercomponentA_1" 
        attribute="[[x]]" 
        attribute="[[x]]" 
        attribute="{{x}}">  
    </polymer-componentA>
    <polymer-componentB id="polymer-componentB_1"
        attribute="{{x}}"> 
    </polymer-componentB>

  </template>
</dom-bind>

<dom-bind id="dombind">
  <template is="dom-bind">

    <polymer-componentA id="polymercomponentA_2" 
        attribute="[[x]]" 
        attribute="[[x]]" 
        attribute="{{x}}">  
    </polymer-componentA>
    <polymer-componentB id="polymer-componentB_2"
        attribute="{{x}}"> 
    </polymer-componentB>

  </template>
</dom-bind>

I know this is not done well, but I dont find good examples about this. Whats the right way to use two polmyer components? Thanks in advance!

Upvotes: 0

Views: 246

Answers (1)

Rickard Elim&#228;&#228;
Rickard Elim&#228;&#228;

Reputation: 7591

If you provide a function, Polymer calls the function once per element instance.

When initializing a property to an object or array value, use a function to ensure that each element gets its own copy of the value, rather than having an object or array shared across all instances of the element.

Source: https://www.polymer-project.org/2.0/docs/devguide/properties#configure-values

Example

 static get properties() {
    return {
      data: {
        type: Object,
        value: function() { return {}; }
      }
    }
  }

Upvotes: 2

Related Questions