Ouch !!! Thanks Karl, that's a really nasty gotcha, would be interested to
hear from the polymer team why this is necessary.
On Friday, 18 March 2016 15:08:59 UTC, 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/cadbb1ce-fdc4-4383-87cb-192c276622a3%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
