Question

我开始探索聚合物，尝试了很少的东西来理解这个概念，但却无法让它正常工作。我在本教程的来源中使用了sampler-scaffold元素http://www.polymer-project.org/components/paper-elements/demo.html 它创建了最小高度为iframe的iframe：500px并将我的页面加载到其中。

在我的页面上，我有自定义元素：

<polymer-element name="test-element" extends="core-selector">
  <template>
    <core-menu>
    <template repeat="{{line in lines}}">
      <core-item label="{{line.name}}" src="{{line.icon}}"></core-item>
    </template>
    </core-menu>
  </template>
  <script>
    Polymer('test-element', {
      ready: function() {
        this.lines = []
      }
    });
  </script>
</polymer-element>

使用angular js为我的元素加载一些数据：

$http.get(BASE_URL+'/getItems').success(function(data) {
  document.querySelector("test-element").lines = data;
})

它有效，有时iframe会调整大小以适应内容，但大多数情况下它的高度保持在500px而不是所有显示的项目。如果我然后调整窗口大小，它将被正确地重新渲染并适合内容。

我无法弄清楚究竟是什么问题，是延迟收到的数据（这不应该导致问题），是根元素的动画 - sampler-scaffold，它可以防止iframe及时呈现或者是其他东西。有没有办法手动触发重新渲染？或者我是否需要监视元素上的数据更改，然后对其执行某些操作？

更新

使用最少的代码创建repo以重现
https://github.com/s-a-y/test
克隆它，运行npm install和npm start

在我学习的同时，问题来自http请求。在我的真实代码中，我向远程服务器请求并且需要一些时间，这就是为什么有时候响应及时得到正确呈现的原因，有时它并不是。在测试项目中我请求本地文件，所以最初没问题，我不得不添加超时来重现问题。如果将超时设置为0，则表示它已正确呈现。

触发聚合物组分重新渲染

0 个答案: