I agree fully with Toni, Polymer is designed to help make web components,
and I thought the idea of a web component is that is isolated. This make
it easy to test and re-use etc. If having multiple copies of an element
changes the behavior of it that would makes this harder to test and not
intuitive. I can see people not testing multiple copies of their elements,
I have created 8 elements and it wasn't until my 9th one I noticed this
issue. I now have to go back and double check everything.
I would actually suggest removing the static array (object) option
completely, as you can simple use a parent object to handle this kind of
situation, and I think this would be the minority of cases anyway.
On Sunday, October 23, 2016 at 3:59:14 PM UTC-4, Toni wrote:
>
> 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]> 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].
>>> 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/cfa30d63-f783-4a47-90ba-97bd1954791f%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
