4

我正在尝试使用 hidden <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>

4

1 回答 1

5

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

当您取消隐藏列表时，该iron-resize事件不会触发，因为iron-list（或在这种情况下x-app，实现IronResizableBehavior）的物理尺寸没有改变，因此列表不会更新。

按照文档的建议（强调我的）：

调整大小

iron-listiron-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');
    }
  },
});

这是一个工作演示：

<!doctype html>

<head>
  <meta name="description" content="Polymer iron-list items added while list hidden">

  <meta charset="utf-8">

  <base href="https://polygit.org/polymer+1.5.0/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>
      HTMLImports.whenReady(function() {

        Polymer({
          is: "x-app",
          behaviors: [
            Polymer.IronResizableBehavior
          ],
          listeners: {
            'iron-resize': '_onIronResize'
          },
          properties: {
            hidden: {
              type: Object,
              notify: true,
              value: false,
              observer: '_hiddenChanged'
            },
            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;
          },
          _hiddenChanged: function(hidden) {
            if (!hidden) {
              console.log('firing iron-list.iron-resize');
              this.$.itemsList.fire('iron-resize');
            }
          },
          _unselect: function(e) {
            this.$.itemsList.deselectItem(e.model.item);
          },
          _changeContactList: function() {
            this.push('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>

修改过的jsbin

于 2016-06-14T01:38:27.130 回答