Polymer 聚合物：模型更改时岩心下拉覆盖更新尺寸_Polymer

Polymer 聚合物：模型更改时岩心下拉覆盖更新尺寸

polymer

Polymer 聚合物：模型更改时岩心下拉覆盖更新尺寸,polymer,Polymer,当我使用“纸张”菜单按钮创建带有纸张项目的覆盖图时，我注意到生成的“核心”下拉列表的大小是在第一次打开时计算的然后，当我更新使用自动绑定绑定的模板模型时，我确实会得到新的纸张项目，但覆盖层的大小与第一次打开时的大小相同有没有办法在模型更改时自动调整此类覆盖的大小这是我的代码： <div class="toolbar toolbar-1" layout horizontal center> <paper-menu-button icon="settings-cell"&

当我使用“纸张”菜单按钮创建带有纸张项目的覆盖图时，我注意到生成的“核心”下拉列表的大小是在第一次打开时计算的

然后，当我更新使用自动绑定绑定的模板模型时，我确实会得到新的纸张项目，但覆盖层的大小与第一次打开时的大小相同

有没有办法在模型更改时自动调整此类覆盖的大小

这是我的代码：

<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>


{{devicename}}
scope=document.querySelector（'template[is=auto-binding]'）；
scope.devices=[{“devicename”：“无设备”}]；

然后，当我手动将scope.devices更改为

[{“devicename”：“No device”}，{“devicename”：“device 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>


你好，世界
{{title}}
{{devicename}}
添加
聚合物（“x测试”{
设备：[{devicename:“abc”}，{devicename:“def”}]，
添加：函数（）{
this.devices.push（{devicename:“more”}）；
var el=this.querySelector（“：：阴影纸菜单按钮：：阴影核心下拉列表：：阴影核心下拉列表覆盖”）；
el.target.style.width=null；
el.target.style.height=null；
},
已创建：函数（）{
this.title=document.title；
}
});

这似乎是核心下拉覆盖中的一个bug。重置target.style.width和height似乎可以使其正常工作。

有关此操作的更多信息，请参阅以下提示：