Although this question is a few months old, I ran into this problem just
now and was not able to solve it immediately with the explanation given. So
for anyone still having issues with this, here is the solution (without
telling you to go anywhere else and try to find it in the documentation...):
1. By default, properties of Polymer objects are shared across all
instances of the object (or, to be more precise, all references to the
object, since Polymer doesn't create new instances, as in "new Element()").
Basically, all properties are by default static.
2. Every property that is supposed to be individual to the specific
reference, in other words, be not static, and changable without messing
with any other instance/reference, has to have the field "value: function()
{ return []; }".
3. Example:
Polymer({
is: 'txt-carousel-view',
properties: {
myOwnList: {
value: function() { return []; } // this is a non-static array,
invididual and fresh for every instance
},
mySharedList: {
value: []; // this is a static array, shared with every
instance array
}
}
})
As a Polymer newbie, I assumed that every instance of an Polymer element in
HTML would be handled as a separate instance code-wise. For me, it would
have been more intuitive that properties are "fresh", except I declare them
explicitly to be static. (Since ES6 is moving Javascript more towards OOP,
I'd like to see the Polymer team to at least consider making Polymer
attributes non-static by default.)
On Friday, March 18, 2016 at 4:08:59 PM UTC+1, Karl Tiedt wrote:
>
> Read the docs on properties and you'll see a statement about using:
>
> value: function() { return []; }
>
> In relation to arrays and objects with the appropriate change to the
> function.
> On Mar 18, 2016 07:42, "Rob Stone" <[email protected] <javascript:>>
> wrote:
>
>> I've just discovered something that is a little confusing and was hoping
>> a polymer expert could explain what is going on :)
>>
>> I've defined an element with an array property (initialised to empty)
>> with an attach method that then uses 'this.push' to add items to the array.
>> If I then create multiple instances of the element, in the browser debugger
>> it looks like the array is shared across all of these instances as each
>> subsequent copy of the element seems to inherit the array values from
>> previous elements. What's even more confusing is that if I create a
>> dom-repeat that iterates over the array, it shows the 'correct' values for
>> each instance, ie. it seems to be using an array that doesn't have
>> duplicate values in it.
>>
>> I have a very small test project that shows this problem, however I
>> haven't got anywhere to host it so cannot put a link up.
>>
>> Cut down code follows:
>>
>> <dom-module id="test-element">
>> <template>
>> <template is="dom-repeat" items="[[items]]">
>> <content></content>
>> <div>[[item]]</div>
>> </template>
>> </template>
>>
>>
>> <script>
>> (function () {
>> Polymer({
>> is: 'test-element',
>> properties: {
>> items: {
>> type: Array,
>> value: []
>> }
>> },
>>
>>
>> attached: function () {
>> console.log('attached');
>> this.push('items', "1");
>> this.push('items', "2");
>> this.push('items', "3");
>> console.log('items=' + this.items); // The 1st instance
>> of the element displays 'items=1,2,3' the 2nd displays 'items=1,2,3,1,2,3'
>> !!!!
>> }
>> });
>> })();
>> </script>
>> </dom-module>
>>
>> <!DOCTYPE html>
>> <head>
>> <title>instance test</title>
>> <script
>> src="bower_components/webcomponentsjs/webcomponents-list.min.js"></script>
>> <link rel="import" href="test-element.html"></link>
>> </head>
>> <body>
>> <test-element>One</test-element>
>> <test-element>Two</test-element>
>> </body>
>> </html>
>>
>>
>>
>> I'm hoping this is a simple misunderstanding on my part, but it does have
>> some slightly annoying implications for a project I am working on.
>>
>> Rob
>>
>> Follow Polymer on Google+: plus.google.com/107187849809354688692
>> ---
>> You received this message because you are subscribed to the Google Groups
>> "Polymer" group.
>> To unsubscribe from this group and stop receiving emails from it, send an
>> email to [email protected] <javascript:>.
>> To view this discussion on the web visit
>> https://groups.google.com/d/msgid/polymer-dev/6a372d9b-fc65-4dd6-9a66-f6020aa39c1f%40googlegroups.com
>>
>> <https://groups.google.com/d/msgid/polymer-dev/6a372d9b-fc65-4dd6-9a66-f6020aa39c1f%40googlegroups.com?utm_medium=email&utm_source=footer>
>> .
>> For more options, visit https://groups.google.com/d/optout.
>>
>
Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups
"Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To view this discussion on the web visit
https://groups.google.com/d/msgid/polymer-dev/56a78ece-d2e0-4a38-8110-699ba1a28105%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
