<iron-list/> "Uncaught RangeError: Invalid array length" when setting items array.

[Kujako]

I'm trying to setup an iron-list using a local array for its data source.

<dom-module id=“my-list">
  <template>
    <iron-list items="{{myItems}}" as="item" indexAs="myIndex">
      <template>
        <div class="item">{{item.name}}</div>
      </template>
    </iron-list>
  </template>
  <script>
    Polymer({
      is:’my-list',
      properties: {
        myItems: {
        type: Array,
        notify: true
        }
      },
      addItem: function(item) {
        this.push("myItems", JSON.parse('{"name":"'+item+'"}'));
      },
      ready: function() {
        this.myItems=[
        {'name':'Taco'},
        {'name':'Burger'},
        {'name':'Fries'},
        {'name':'Chips'}
        ];
      }
    });
  </script>
</dom-module>

Everything works, but from the ready() method I get "Uncaught RangeError: Invalid array length". This seems to happen whenever the array is set for the first time. While this does not impact operations from a browser, Cordova stops on this error.

Any ideas as to how to suppress or prevent this error? Kind of running blind as I can't find any example code to work off of.

[Emmanuel Garcia]

Are you using the last version of iron-list (v1.0.1)?  Here's your code using the last version: http://jsbin.com/facani/edit?html,output

bower update or https://github.com/PolymerElements/iron-list/releases/tag/v1.0.1

[Kujako]

Yes, bower.json shows version 1.0.1

[Emmanuel Garcia]

Is there something different in this example http://jsbin.com/facani/edit?html,output (apart from the css)? 

[Kujako]

That looks right, and when I copy in my code it works OK. The error seems to only happen when I have my-list defined in an external file....

So if I copy the code into a file named "my-list.html" and import it with...

<link rel="import" href="/elements/my-list.html"/>

and then reference it with...

<my-list></my-list>

I see the error...

[Emmanuel Garcia]

It seems like this issue is related to https://github.com/PolymerElements/iron-list/issues/36 as well.

~ Emmanuel

[Kujako]

Weirder and weirder. If I put the <dom-module> inline in index.html I do not see the error, but in my project I also do not see the iron-list rendered. If I move it to an external file, I get the error but DO see the elements. So no work around....

I really need to stop the error. Everything works fine with the error when run from the desktop, but the error causes Cordova to halt.

[Kujako]

Found a work around. As you suggested, this is related to issue 36. It only happens when the iron-list is attached to the DOM but not rendered due to a parent element being hidden. So the solution is to not instantiate the array until after it's rendered. So rather then have default values, I check if the array is null when pushing new items into it.

addItem: function(item) {
    if(this.myItems==null) this. myItems =[];

    this.push("myItems", JSON.parse('{"name":"'+item+'"}'));

    console.log('my-list:'+item);
}

This seems to work, without error.

[Emmanuel Garcia]

Btw, this issue should be fixed now in https://github.com/PolymerElements/iron-list/releases/tag/v1.0.2

~ Emmanuel