I would consider this to be a bug, or at the very least a design flaw. It's not readily apparent that you are defining prototypes in the property specifications. Shared state through parent prototypes seems to violate the whole nature of reusable components. I think property defaults should be mixed into the instantiated object, rather than shared across all instances.
On Thursday, January 4, 2018 at 6:17:59 AM UTC-8, Lars Knudsen wrote: > > I think this should rather be explained clearly in the guidelines. It is a > valuable thing when needed > > On Jan 4, 2018 07:57, <[email protected] <javascript:>> wrote: > >> Totally agree. Many developers won't know this after they finish reading >> the tutorial. It's like learning Python without being warned of the >> differences between class variables and instance variables. >> To keep a shared state across multiple same type of elements, is not a >> daily demand, but will cause potential troubles in a daily work. >> >> On Wednesday, April 12, 2017 at 5:49:07 PM UTC+2, [email protected] >> wrote: >>> >>> 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 a topic in the >> Google Groups "Polymer" group. >> To unsubscribe from this topic, visit >> https://groups.google.com/d/topic/polymer-dev/pa_Ak2ATRw8/unsubscribe. >> To unsubscribe from this group and all its topics, send an email to >> [email protected] <javascript:>. >> To view this discussion on the web visit >> https://groups.google.com/d/msgid/polymer-dev/69a506c3-3898-4a64-ab17-f974e51bcfd1%40googlegroups.com >> >> <https://groups.google.com/d/msgid/polymer-dev/69a506c3-3898-4a64-ab17-f974e51bcfd1%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/44809cf1-c50e-44ab-b304-e7d957e08ca4%40googlegroups.com. For more options, visit https://groups.google.com/d/optout.
