Question

我正在尝试使用隐藏的<iron-list>，但我需要了解它为什么渲染不会更新。

这是相关问题：https://github.com/PolymerElements/iron-list/issues/263

这是代码：http://jsbin.com/vagumebupe/9/edit?html,console,output

<!doctype html>
<head>
  
  <meta charset="utf-8">

  <base href="https://polygit.org/polymer+:master/components/">

  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  
  <link href="polymer/polymer.html" rel="import">

  <link rel="import" href="iron-flex-layout/iron-flex-layout.html">
  <link rel="import" href="iron-ajax/iron-ajax.html">
  <link rel="import" href="paper-icon-button/paper-icon-button.html">
  <link rel="import" href="iron-icon/iron-icon.html">
  <link rel="import" href="iron-icons/iron-icons.html">
  <link rel="import" href="paper-styles/color.html">
  <link rel="import" href="paper-styles/typography.html">
  <link rel="import" href="app-layout/app-toolbar/app-toolbar.html">
  <link rel="import" href="paper-menu/paper-menu.html">
  <link rel="import" href="paper-item/paper-item.html">
  <link rel="import" href="paper-badge/paper-badge.html">
  <link rel="import" href="iron-list/iron-list.html">
  
  <style is="custom-style">
  body {
    @apply(--layout-fullbleed);
  }
</style>

</head>

<body unresolved>

  <x-app></x-app>
  
<dom-module id="x-app">
  <style>
      :host {
        @apply(--layout-fit);
        @apply(--layout-vertical);
        @apply(--paper-font-common-base);
        font-family: sans-serif;
      }
      app-toolbar {
        background: var(--paper-pink-500);
        box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.3);
        color: white;
        z-index: 1;
        color: white;
        --paper-toolbar-title: {
          font-size: 16px;
          line-height: 16px;
          font-weight: bold;
          margin-left: 0;
        };
      }
      app-toolbar paper-icon-button {
        --paper-icon-button-ink-color: white;
      }
      #itemsList,
      #selectedItemsList {
        @apply(--layout-flex);
      }
      .item {
        @apply(--layout-horizontal);
        cursor: pointer;
        padding: 16px 22px;
        border-bottom: 1px solid #DDD;
      }
      .item:focus,
      .item.selected:focus {
        outline: 0;
        background-color: #ddd;
      }
      .item.selected .star {
        color: var(--paper-blue-600);
      }
      .item.selected {
        background-color: var(--google-grey-300);
        border-bottom: 1px solid #ccc;
      }
      .avatar {
        height: 40px;
        width: 40px;
        border-radius: 20px;
        box-sizing: border-box;
        background-color: #ddd;
      }
      .pad {
        @apply(--layout-flex);
        @apply(--layout-vertical);
        padding: 0 16px;
      }
      .primary {
        font-size: 16px;
      }
      .secondary {
        font-size: 14px;
      }
      .dim {
        color: gray;
      }
      .star {
        width: 24px;
        height: 24px;
      }
      paper-badge {
        -webkit-transition: all 0.1s;
        transition: all 0.1s;
        opacity: 1;
        margin-top: 5px;
      }
      paper-badge[label="0"] {
        opacity: 0;
      }
      #starredView {
        width: 200px;
        border-left: 1px solid #ddd;
      }
      paper-item {
        white-space: nowrap;
        cursor: pointer;
        position: relative;
      }
      paper-item:hover::after {
        content: "－";
        width: 16px;
        height: 16px;
        display: block;
        border-radius: 50% 50%;
        background-color: var(--google-red-300);
        margin-left: 10px;
        line-height: 16px;
        text-align: center;
        color: white;
        font-weight: bold;
        text-decoration: none;
        position: absolute;
        right: 15px;
        top: calc(50% - 8px);
      }
      .noSelection {
        color: #999;
        margin-left: 10px;
        line-height: 50px;
      }
      .twoColumns {
        @apply(--layout-flex);
        @apply(--layout-horizontal);
        overflow: hidden;
      }
      #starredView {
        @apply(--layout-vertical);
      }
    </style>
    <template>
      <app-toolbar>
        <div title>Selection using iron-list</div>
        <div>
          <paper-icon-button icon="icons:more-horiz" alt="hidden" on-tap="_toggleHidden"></paper-icon-button>
          <paper-icon-button icon="icons:add" alt="add" on-tap="_changeContactList"></paper-icon-button>
          <paper-badge label$="[[selectedItems.length]]"></paper-badge>
          
        </div>
      </app-toolbar>

        <!-- Main List for the items -->
        <iron-list id="itemsList" items="[[data]]" selected-items="{{selectedItems}}" selection-enabled multi-selection hidden="{{hidden}}">
          <template>
            <div>
              <div tabindex$="[[tabIndex]]" aria-label$="Select/Deselect [[item.name]]" class$="[[_computedClass(selected)]]">
                <img class="avatar" src="[[item.image]]">
                <div class="pad">
                  <div class="primary">
                    [[item.name]]
                  </div>
                  <div class="secondary dim">[[item.shortText]]</div>
                </div>
                <iron-icon icon$="[[iconForItem(selected)]]" class="star"></iron-icon>
              </div>
              <div class="border"></div>
            </div>
          </template>
        </iron-list>
    </template>
  <script>
    
    addEventListener('WebComponentsReady', function() {
      
      Polymer({
        is: "x-app",
        behaviors: [
          Polymer.IronResizableBehavior
        ],
        listeners: {
          'iron-resize': '_onIronResize'
        },
        properties: {
          hidden: {
            type: Object,
            notify: true,
            value: false
          },
          selectedItems: {
            type: Object
          },
          data: {
            type: Object,
            notify: true,
            value : [
                      {
                        "name": "Liz Grimes",
                        "image": "https://s3.amazonaws.com/uifaces/faces/twitter/enda/73.jpg",
                        "shortText": "est ad reprehenderit occaecat consequat"
                      },
                      {
                        "name": "Frazier Lara",
                        "image": "https://s3.amazonaws.com/uifaces/faces/twitter/guillogo/73.jpg",
                        "shortText": "consectetur culpa adipisicing voluptate enim"
                      }
                    ]
          }
        },
        iconForItem: function(isSelected) {
          return isSelected ? 'star' : 'star-border';
        },
        _computedClass: function(isSelected) {
          var classes = 'item';
          if (isSelected) {
            classes += ' selected';
          }
          return classes;
        },
        _unselect: function(e) {
          this.$.itemsList.deselectItem(e.model.item);
        },
        _changeContactList: function() {
          this.data = [
            {
              "name": "Shelley Molina",
              "image": "https://s3.amazonaws.com/uifaces/faces/twitter/smalonso/73.jpg",
              "shortText": "laboris do velit ipsum non"
            }
          ];
          console.log('Replace data !')
        },
        _toggleHidden: function(){
          this.hidden = !this.hidden;
          console.log('Hidden : ' + this.hidden)
        },
        _onIronResize: function() {
           console.log('Resize');
        }

      });
      
    });
    
  </script>
</dom-module>
  
</body>

Answer 1

iron-list在调整列表大小或其items属性发生更改时呈现其项目。作为优化，如果列表不可见，则为_render() exits。（渲染列表项可能相对昂贵，具体取决于项目的复杂性，特别是在移动设备上，因此在隐藏列表时忽略渲染将节省CPU周期。）

当您取消隐藏列表时，iron-resize事件不会触发，因为iron-list的物理维度（或者在这种情况下x-app实现了IronResizableBehavior）避难所t已更改，因此列表不会更新。

遵循docs（强调我的）的建议：

调整

iron-list在通过iron-resize事件收到通知时列出项目。任何实现IronResizableBehavior的元素都会触发此事件。

默认情况下，iron-pages，paper-tabs或paper-dialog等元素会自动触发此事件。 如果您手动隐藏列表（例如，您使用display：none），您可能希望在列表再次可见后立即手动触发此事件。例如：
IronResizableBehavior

...您应该在取消隐藏document.querySelector('iron-list').fire('iron-resize');时手动触发iron-resize事件。为此，我们在元素的iron-list属性上使用观察者：

hidden

这是一个有效的演示：

Polymer({
  ...
  properties: {
    hidden: {
      type: Object,
      notify: true,
      value: false,
      observer: '_hiddenChanged'
    },
    ...
  },
  _hiddenChanged: function(hidden) {
    if (!hidden) {
      this.$.itemsList.fire('iron-resize');
    }
  },
});

^{modified jsbin}

为什么在列表被隐藏时没有更新铁列表？

1 个答案:

调整