Question

我的主元素使用flatiron-element来重定向我的用户：

....
<template if="{{route != null}}">
  <template if="{{route == 'home' || route == ''}}">
    <home-element structure="{{home}}"></home-element>
  </template>
  <template if="{{route == 'research'}}">
    <research-element structure="{{research}}"></research-element>
  </template>
  <template if="{{route == 'highlights'}}">
    <!-- <highlights-element></highlights-element> -->
  </template>
</template>
....

....
Polymer('research-element', {
      name: 'research',
      ready: function(){
        // wait for the WebComponent to be ready to hook up jquery
        var self = this;
         addEventListener('polymer-ready', function() {
          window.console.log($('#'+self.name+'-affix'));
           $('#'+self.name+'-affix').affix();
         });
 ....

1-登录（#home）时，用户将被定向到'home-element'，并且WebComponentsReady被正确触发。

2-如果我想转到另一个页面（#research），用户将被定向到'research-element'。问题是，一旦'research-element'准备就绪，就不会重新触发WebComponentsReady。

预计还是我做错了什么？

另外，有没有什么好方法可以在元素加载后缓存它们？

最佳，尼古拉斯

Answer 1

polymer-ready事件是向外界发出的信号，表明已加载导入，自定义元素已升级，且Polymer已完成其设置。你不应该在你的元素中听它。它仅与在主应用中使用相关（例如index.html）。

相反，使用attached/detached lifecycle callbacks知道从dom添加/删除每个元素的时间：

<script>
  Polymer('home-element', {
    attached: function() {
      console.log('home-element attached'); 
    },
    detached: function() {
      console.log('home-element detached'); 
    }
  });
</script>

演示：http://jsbin.com/zeyoyisu/1/edit

Answer 2

如果您正在使用Polymer，请尝试WebComponentsReady，而不是监听polymer-ready事件。这是我们介绍的最近一个事件，当你的元素加载并准备就绪时会被触发。快demo。

对于您的具体元素，您是否可以尝试上述内容，如果您仍然遇到问题，请告诉我们？您也可以尝试在this.fire()内点击research-element时自动启动自定义事件。

WebComponentsReady未重新触发

2 个答案: