Question

当我使用纸张菜单按钮创建带有纸张项目的叠加层时，我注意到所得到的核心下拉列表的大小是在首次打开时计算的。

当我更新我的自动装订绑定的模板模型时，我会获得新的纸质项目，但我的叠加层大小与首次打开时的大小相同。

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

这是我的代码：

<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"}]并且之前已经打开菜单时，我必须滚动覆盖。

Answer 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似乎可以使它工作。

Polymer：模型更改时的core-dropdown-overlay更新大小

1 个答案: