在同一頁面使用一對聚合物組件兩次不起作用

Question

對聚合物而言是新的。我使用兩個不同的聚合物組件相互通信。我必須做兩次（2 x 2組件）。

下面的代碼使用只是一個對不同的部件，它的工作原理：

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

我知道這樣做不好，但我沒有找到這方面的好例子。 什麼是使用兩個polmyer組件的正確方法？ 在此先感謝！

Answer 1

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.

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

例

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