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!
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 {}; }
}
}
}