polymer - 为什么当列表隐藏时，iron-list 不更新？-6ren

polymer - 为什么当列表隐藏时，iron-list 不更新？

转载作者：行者123 更新时间：2023-12-02 15:13:27

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

这是代码: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>

最佳答案

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

当您取消隐藏列表时，iron-resize 事件不会触发，因为 iron-list 的物理尺寸(或者在本例中为 x-app (实现了 IronResizableBehavior)尚未更改，因此列表不会更新。

遵循 docs 的建议(强调我的):

Resizing

iron-list lays out the items when it receives a notification via the iron-resize event. This event is fired by any element that implements IronResizableBehavior.

By default, elements such as iron-pages, paper-tabs or paper-dialog will trigger this event automatically. If you hide the list manually (e.g. you use display: none) you might want to implement IronResizableBehavior or fire this event manually right after the list became visible again. For example:
document.querySelector('iron-list').fire('iron-resize');

...您应该在取消隐藏 iron-list 后手动触发 iron-resize 事件。为此，我们在元素的 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>

^{modified jsbin}

关于polymer - 为什么当列表隐藏时，iron-list 不更新？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37796156/

文章推荐： clojure - 在 Clojure 中导入什么 -?> ？

文章推荐： Grails grailApplication.controllerClasses 按包排序 Controller

iron - 我在哪里可以下载 Iron Javascript
我阅读了一些关于 Iron javascript 的内容，但我要去哪里下载它？ http://dotnet.dzone.com/articles/pumping-iron-javascript. 最佳
rust - 无法编译 Iron 示例 : expected struct `iron::request::Request` , 找到结构 `iron::Request`
我正在尝试让一个简单的 Iron 示例起作用: extern crate iron; extern crate router; use iron::prelude::*; use iron::stat
ironpython - Iron Python/Iron Ruby EXE
我一直梦想从脚本语言创建一个“真正的 exe”。随着基于 DLR 的 Python 和 Ruby 实现可用，这是否更接近现实？我想创建一个“真正的应用程序”: 一个 Windows 窗体应用程序控
docker - Iron.io设置在 `iron register`步骤上获取404 Not Found
我正在通过iron.io入门指南进行操作:http://dev.iron.io/worker/getting_started/ 我正在采取步骤: Push it to Docker Hub and r
javascript - iron-page 上的 iron-scroll-threshold
我在使用 iron-scroll-threshold 以及与其他页面共享同一主机的 iron-page 时遇到问题。我的应用程序 UI 顶部有 paper-tabs。随着选项卡的更改，页面会延迟加载
html - 如何将 iron selector 与 iron pages 链接起来？
我最近一直在使用 Polymer，我有一个熨斗选择器，在纸质抽屉中放满了纸质图标元素以供导航之用。但出于某种原因，我无法让他们链接: Home
go - Polymer iron-form 或 iron-ajax 错误响应内容
我正在使用 Polymer 1.0 和 Golang 1.5。我从 Go 发送一个带有 400 Bad Request 和一些内容的 json 响应，如下所示: d := struct{ M
.net - 哪种动态 .NET 语言更适合学习，Iron Ruby 还是 Iron Python？
我想花一些时间来了解更多关于构建在 DLR 之上的动态语言的知识，但我不确定哪种语言更适合学习。时间有限，我真的只有时间去学习其中之一。从长远来看，关于这两者(Iron Ruby 或 Iron P
rust - "iron::Modifier is not implemented"尝试使用 iron 和 mime 设置响应的内容类型
我正在尝试运行 O'Reilly 出版的 Programming Rust 一书中的示例，但我坚持要使以下代码成功编译: Cargo.toml [package] name = "gcd-online
rust - 无法访问 Iron 中的参数，因为不满足特征绑定(bind) plugin::Plugin
我正在探索 Iron Web 框架的功能。据我所知，Iron core 没有可处理的 APIHTTP 参数，所以我尝试使用 params crate。 error: the trait bound `
c# - 您会推荐 Iron Ruby、Iron Python 或 PowerShell 来使 C# 应用程序成为脚本宿主吗？
您会推荐 Iron Ruby、Iron Python 或 PowerShell 来使 C# 应用程序成为脚本宿主吗？经过一些快速的修改，现在我倾向于 powershell 主要有两个原因(请注意，这
rust - 无法创建 Iron 处理程序，因为不满足特征绑定(bind) std::ops::Fn<(&mut iron::Request)>
我正在尝试为 Iron 请求创建一个处理程序: extern crate iron; extern crate mount; use iron::{Iron, Request, Response, I
html - 在 Polymer 中，为什么要使用 `<input is="iron-input">` instead of ` `？
在 Polymer 文档 ( https://elements.polymer-project.org/elements/iron-input ) 中，我发现: 而在另一个官方文档(https://
.net - "Iron"语言准备好迎接黄金时段了吗？
在生产系统中开始使用 Iron Ruby 和 Iron Python 可以吗？此外，托管它们是否有任何其他要求？另外，考虑到 F# 是一种与 Python 相同的函数式编程语言，在 .NET 框架中
Meteor Iron 路由器无法从路由获取当前路径
在模板助手中，我从 Iron.Router (iron:router) 获取当前路径如下: Router.current().route.path(this); 这工作正常，除非路由路径确实包含参数
javascript - Iron 验证行为中验证函数回调的范围问题
polymer 1.* 在父元素中，我使用Polymer.IronValidatableBehavior。我的回调函数 arg this.setInvalidStates 存在范围问题。在子元素 b
.net - (Iron)Python继承构造函数问题
所以我试图创建一个 DataGridViewColumn 的子类，它既有一个无参数构造函数，又有一个采用一个参数的构造函数，该参数需要 DataGridViewCell 类型。这是我的课: class
meteor - Iron Router 重定向而不杀死后退按钮功能
我在一个相当复杂的应用程序中使用 Iron Router，并且有一些路由将用户重定向到其他内部路由(例如， "/" 总是重定向到 "/dashboard" )。我们一直在通过添加例如Router.g
meteor - Iron Router 上的上一页位置
有没有办法在IronRouter中进入下一页之前获取上一页位置？有没有我可以用来获取这些信息的事件？提前致谢。最佳答案由于 Iron Router 使用通常的 History API，因此您可
polymer - Iron Ajax - 如何从响应功能访问响应？
我有这个元素: ... Polymer({ ... _handleResponse: function(event){ co

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

polymer - 为什么当列表隐藏时，iron-list 不更新？

Resizing