聚合物：模型更改时的核心下拉覆盖更新大小答案

【问题标题】：Polymer: core-dropdown-overlay update size on model change聚合物：模型更改时的核心下拉覆盖更新大小
【发布时间】：2014-10-14 00:37:33
【问题描述】：

当我使用纸张菜单按钮创建包含纸张项目的叠加层时，我注意到生成的核心下拉菜单的大小是在第一次打开时计算的。

当我更新与自动绑定绑定的模板模型时，我确实得到了新的纸质项目，但我的叠加层大小保持与第一次打开时相同的大小。

有没有办法让此类叠加层的模型更改自动调整大小？

这是我的代码：

<div class="toolbar toolbar-1" layout horizontal center>
  <paper-menu-button icon="settings-cell">
    <template repeat="{{devices}}">
      <paper-item>{{devicename}}</paper-item>
    </template>
  </paper-menu-button> 
</div>

<script>

scope = document.querySelector('template[is=auto-binding]');

scope.devices = [{"devicename": "No device"}];
</script>

当我手动将 scope.devices 更改为 [{"devicename": "No device"}, {"devicename": "Device 1"}] 并且之前已经打开过菜单时，我必须在叠加层中滚动。

【问题讨论】：

标签： polymer

【解决方案1】：

我得到了 IRC 的答复：

<!DOCTYPE html>
<html>
<head>
  <title>Hello World</title>
  <script src="http://www.polymer-project.org/components/platform/platform.js"></script>
  <link rel="import" href="http://www.polymer-project.org/components/polymer/polymer.html">
  <link rel="import" href="http://www.polymer-project.org/components/paper-item/paper-item.html">
  <link rel="import" href="http://www.polymer-project.org/components/paper-menu-button/paper-menu-button.html">
  <link rel="import" href="http://www.polymer-project.org/components/core-icons/core-icons.html">
  <polymer-element name="x-test">
    <template>
      <h1>{{title}}</h1>
      <paper-menu-button id="a" icon="menu">
        <template repeat="{{devices}}">
          <paper-item>{{devicename}}</paper-item>
        </template>
      </paper-menu-button>
      <button on-tap="{{add}}">Add</button>
    </template>
    <script>
      Polymer('x-test', {
        devices: [{devicename: "abc"}, {devicename: "def"}],
        add: function() {
          this.devices.push({devicename: "more"});

          var el = this.querySelector("::shadow paper-menu-button::shadow core-dropdown::shadow core-dropdown-overlay");
          el.target.style.width = null;
          el.target.style.height = null;
        },
        created: function() {
          this.title = document.title;
        }
      });
    </script>
  </polymer-element>
</head>
<body>
  <x-test></x-test>
</body>
</html>

这似乎是 core-dropdown-overlay 中的一个错误。重置 target.style.width 和 height 似乎可以正常工作。

【讨论】：

有关更多信息，另请参阅以下票证：github.com/Polymer/paper-dropdown/issues/2