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响应到达后获取firstVisibleIndex的属性lastVisibleIndex和iron-list。

我用它来获取属性：

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

我的问题：这是获取iron-list属性的方法吗？或者有更好/更正确的方法吗？

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

Answer 1

是的，有一种“更好”的方式。： - ）

聚合物docs on Automatic node finding状态：

元素模板中指定id的任何节点都存储在this.$哈希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>

删除额外模板可让您使用iron-list访问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

聚合物遍历dom的属性铁列表

1 个答案: