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 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/69a506c3-3898-4a64-ab17-f974e51bcfd1%40googlegroups.com. For more options, visit https://groups.google.com/d/optout.
