聚合物遍历 dom for properties iron-list

Question

我有一个包含 iron-list 和 iron-ajax 元素的视图，用于填充数据。简化代码：

<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>

我想在 AJAX 响应到达后获取 iron-list 的属性 firstVisibleIndex 和 lastVisibleIndex。

我用它来获取属性：

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

我的问题：这是获取 iron-list 属性的方法吗？或者是否有 better/more 正确的方法来做到这一点？

第一行给出 0 的结果，第二行给出 undefined，但是当我查看 Chrome DevTools 时，第二行属性设置为 187 -- 与响应中返回的对象数相同。

Answer 1

是的，有一个 "better" 方法。 :-)

聚合物 docs on Automatic node finding 状态：

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

因此，要访问 ID 为 itemList 的节点，您可以简单地执行以下操作：

var itemList = this.$.itemList;

更新问题是你的 iron-list 错误地包含在它自己的 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>

删除额外的模板将允许您使用 this.$.itemList.

访问 iron-list 节点

<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

聚合物遍历 dom for properties iron-list

Polymer traversing the dom for properties iron-list

polymer

polymer-1.0