当文件中描述的“可调整大小”元素被隐藏/未隐藏时,聚合物IronResizableBehavior铁调整大小事件未被触发

时间:2016-03-04 00:04:22

标签: javascript polymer polymer-1.0

以下是基于隐藏或未隐藏的“可调整大小”元素而不是仅在正在调整大小的窗口上激活的Polymer IronResizableBehavior演示。调整窗口大小时会触发该事件,但Polymer docs(https://elements.polymer-project.org/elements/iron-resizable-behavior)表示:

  

此事件在隐藏后显示,当另一个可调整大小显式调整大小时,或者窗口调整大小时将被触发。

所以,我希望在隐藏/取消隐藏下面的“x-puck”元素时也会触发该事件。我做错了什么?

<link rel="import" href="../../iron-resizable-behavior.html">
<link rel="import" href="../../../paper-button/paper-button.html">

<dom-module id="x-puck">
  <style>
  </style>

  <template>

    <b>I'm an un-hidden element!</b>

  </template>

</dom-module>

<script>
  Polymer({

    is: 'x-puck',

    behaviors: [
      Polymer.IronResizableBehavior
    ],

    listeners: {
      'iron-resize': '_onIronResize'
    },

    attached: function() {
      this.async(this.notifyResize, 1);
    },

    _onIronResize: function() {
      alert('x-puck _onIronResize called!');
    }
  });
</script>


<dom-module id="x-app">
  <style>
  </style>

  <template>
    <paper-button on-tap="showElement">Show</paper-button>
    <paper-button on-tap="hideElement">Hide</paper-button>

    <x-puck id="xPuck" hidden$="{{hide}}"></x-puck>
  </template>

</dom-module>

<script>
  Polymer({

    is: 'x-app',

    behaviors: [
      Polymer.IronResizableBehavior
    ],

    properties: {
      hide: {
        type: Boolean,
        value: true
      }
    },

    showElement: function() {
      this.hide = false;
    },

    hideElement: function() {
      this.hide = true;
    }
  });
</script>

1 个答案:

答案 0 :(得分:3)

I looked fastly at the source code of IronResizableBehavior and didn't see anything that would support that an element implementing it will be resized whenever its CCS display property is changed (it's essentially what the hidden attribute does).

Looking at the iron-pages element, you can see that it explicitely calls notifyResize whenever an element is unhidden, so I supposed this is the way it works.

I would suggest you to open an issue on the Github repo in order to get more feedback on this, and to correct this misleading statement if I'm right.