LitElement - 'items' property is undefined within the virtualScroller directive

[vedtam]

Hi,

I am using virtual-scroller in a Polymer litElement. My issue is, that I can't access properties of the _render method from inside the virtualScroller directive. The length of the _items array is picked up just fine, but as I try to access the property from inside the directive I get undefined for _items.

In turn if I get around and use ${console.log(this._items[i].id)} it works.

What could be wrong?

...

import { virtualScroller } from '../../libs/lit-scroller.js';

class CreatorPrintsList extends connect(store)(LitElement) {

  _render({_items}) {
    return html`
      <div class="list">

        ${ virtualScroller(_items.length, (i) => html`
            ${console.log(_items[i].id)}       // "Cannot read property 'id' of undefined"
            ${console.log(this._items[i].id)}  // working, returns id of 3
        `) }

      </div>`;
  }

  static get properties() {
    return {
      _items: Array
    }
  }

  constructor() {
     super();
     this._items = [];
   }

  _stateChanged(state) {
     if (Object.keys(state.items).length !== 0) {
       this._items = state.items;
     }
   }

...

[aadamsx]

What version of LitElement are you using? The API looks a little different from what you show above ATM.

[vedtam]

Hi,

I'm using lit-element v. 0.5.2

[vedtam]

@aadamsx indeed, LitElement got updated a few days ago. I give it a read, and update my components to see if it solves my issue.

[aadamsx]

lit-element is changing fast, including the api. I'm working with 0.6.0-dev.6.

[vedtam]

updated my LitElement in my project to the latest version, now virtual-scroller throws:

virtual-repeater.js:497 Uncaught TypeError: Cannot read property 'getBoundingClientRect' of null
    at Object._measureChild (virtual-repeater.js:497)
    at Object._measureChild (lit-repeater.js:83)
    at children.map (virtual-repeater.js:233)
    at Array.map (<anonymous>)
    at Object._measureChildren (virtual-repeater.js:232)
    at Object._render (virtual-repeater.js:288)
    at Object._render (virtual-scroller.js:208)
    at _pendingRender.requestAnimationFrame (virtual-repeater.js:201)
Uncaught TypeError: Failed to execute 'observe' on 'ResizeObserver': parameter 1 is not of type 'Element'.
    at _kids.forEach.child (virtual-scroller.js:218)
    at Array.forEach (<anonymous>)
    at Object._render (virtual-scroller.js:218)
    at _pendingRender.requestAnimationFrame (virtual-repeater.js:201)

Demos from this repo throws the same error after npm i with the latest lit-html imported :( hmmm...

[valdrinkoshi]

This should get fixed with #141

[valdrinkoshi]

Closing as #141 was merged