CODEWITHSUNDEEP
polymerpolymer-1.0
Marco St
Marco St

Reputation: 318

Polymer traversing the dom for properties iron-list

I have a view that contains an iron-list and an iron-ajax element to populate it with data. Simplified code:

<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/iron-list/iron-list.html">

<dom-module id="my-view2">
  <template>
    <style>
      :host {
        display: block;
        padding: 10px;
      }
    </style>

    <template is="dom-bind" id="listTemplate" >
      <iron-ajax
              auto
              verbose
              url="http://localhost:3003/items"
              params='{}'
              handle-as="json"
              last-response="{{items}}"
              debounce-duration="300"></iron-ajax>
      <iron-list
              id="itemList"
              items="[[items]]"
              as="item"
              scrollTarget="html">
        <template>
          <div>
            <div class="item" tabindex$="[[tabIndex]]">
              <p>[[item.description]]</p>
            </div>
          </div>
        </template>
      </iron-list>
    </template>
  </template>

  <script>
    HTMLImports.whenReady(function() {
      Polymer({

        is: 'my-view2',
        listeners: {
          'response': 'responseHandler'
        },
        behaviors: [Polymer.IronResizableBehavior],
        ready: function () {
          console.log('my-view2 ready');
        },
        attached: function () {
          console.log('my-view2 attached');
        },
        responseHandler: function (e, detail) {
          console.log('my-view2 ajax response received');
          this.notifyResize();
          console.log('notifyResize');
          console.log('firstVisibleIndex:', this.$.listTemplate.$.itemList.firstVisibleIndex);
          console.log('lastVisibleIndex:', this.$.listTemplate.$.itemList.lastVisibleIndex);
        },
        scrollHandler: function (e) {
          console.log('scroll event:',e);
        }
      });
    });

  </script>

</dom-module>

I want to get the properties firstVisibleIndex and lastVisibleIndex of the iron-list after the AJAX response has arrived.

I use this to get to the properties:

this.$.listTemplate.$.itemList.firstVisibleIndex
this.$.listTemplate.$.itemList.lastVisibleIndex

My question: Is this the way to get to the properties of the iron-list? Or is there a better/more correct way to do this?

The first line gives me the result of 0, and the second gives me undefined, but when I look in the Chrome DevTools, the second property is set to 187 -- the same as the number of returned objects in the response.

Upvotes: 0

Views: 119

Answers (1)

tony19
tony19

Reputation: 138266

Yes, there's a "better" way. :-)

The Polymer docs on Automatic node finding state:

Any node specified in the element's template with an id is stored on the this.$ hash by id.

So to access the node with ID of itemList, you could simply do:

var itemList = this.$.itemList;

UPDATE The problem is that your iron-list is incorrectly contained in its own template:

<template>
  <template is="dom-bind" id="listTemplate" > <!-- unnecesary template -->
    ...
    <iron-list
            id="itemList"
            items="[[items]]"
            as="item"
            scrollTarget="html">
      <template>
        <div>
          <div class="item" tabindex$="[[tabIndex]]">
            <p>[[item.description]]</p>
          </div>
        </div>
      </template>
    </iron-list>
  </template>
</template>

Removing the extra template would allow you to access the iron-list node with this.$.itemList.

<head>
  <base href="https://polygit.org/polymer+1.5.0/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="polymer/polymer.html">
  <link rel="import" href="iron-list/iron-list.html">
</head>

<body>
  <my-view2></my-view2>

  <dom-module id="my-view2">
    <template>
      <iron-list id="itemList"
                 items="[[items]]"
                 as="item"
                 scroll-target="html">
        <template>
          <div>
            <div class="item" tabindex$="[[tabIndex]]">
              <p>[[item.description]]</p>
            </div>
          </div>
        </template>
      </iron-list>
    </template>

    <script>
      HTMLImports.whenReady(function() {
        Polymer({
          is: 'my-view2',
          properties: {
            items: {
              type: Array,
              value: function() { return [1,2,3,4]; }
            }
          },
          ready: function () {
            console.log('my-view2 ready');
            console.log('itemList', this.$.itemList);
          }
        });
      });
    </script>

  </dom-module>
</body>

codepen

Upvotes: 2

Related Questions