聚合物添加事件监听器

我正在使用聚合物，我很困惑至于什么时候应该使用什么类型的绑定。例如说我有以下代码：聚合物添加事件监听器

<body unresolved touch-action="auto"> 
    <my-app></my-app> 
    <polymer-element name="my-app"> 
     <template> 
      <core-drawer-panel id="drawerPanel"> 
       <core-header-panel drawer id="drawer" mode="seamed"> 
        <core-toolbar id="navheader"> 
         <span>My Site</span> 
        </core-toolbar> 

        <core-menu selected="0" selectedItem="{{selectedMenu}}"> 
         <paper-item icon="home" label="One"></paper-item> 
         <paper-item icon="today" label="Two"></paper-item> 
        </core-menu> 
       </core-header-panel> 

       <core-header-panel main mode="seamed"> 

        <core-toolbar id="mainheader"> 
         <paper-icon-button id="navicon" icon="menu"></paper-icon-button> 
         <paper-icon-button id="back" icon="arrow-back"></paper-icon-button> 
         <span flex>{{selectedMenu.label}}</span> 
        </core-toolbar> 
        <div class="content"> 
         Content goes here! 
        </div> 
       </core-header-panel> 
      </core-drawer-panel> 
     </template> 
     <script> 
      Polymer('my-app', function(){ 

      }); 
     </script> 
    </polymer-element> 
</body>

在过去，我没有在这个polymer-element代码，而只是直接在代码。然后，我可以做的东西，如：

var navicon = document.getElementById('navicon'); 
var back = document.getElementById('back'); 
var drawerPanel = document.getElementById('drawerPanel'); 

navicon.addEventListener('click', function(){ 
    drawerPanel.togglePanel(); 
}); 
back.addEventListener('click', function(){ 
    window.history.back(); 
});

但是，我不知道我应该怎么做这个polymer-element内。

此外，我曾使用document.addEventListener('polymer-ready', function(){ ... });来确保元素在初始化之前被加载。我如何正确地做到这一点？

来源

2014-07-20 jdepypere

您只需要将您的旧js放入聚合物元素脚本标记中即可。元素设置时调用ready函数。

Polymer()的第二个参数需要是一个对象，而不是一个函数。

<script> 
    Polymer('my-app', { 
     ready: function() { 
      var navicon = this.$.navicon; 
      var back = this.$.back; 
      var drawerPanel = this.$.drawerPanel; 

      navicon.addEventListener('click', function() { 
       drawerPanel.togglePanel(); 
      }); 
      back.addEventListener('click', function() { 
       window.history.back(); 
      }); 
     } 
    }); 
</script>

欲了解更多信息阅读真棒polymer docs。

来源

2014-07-20 12:45:12 Oliver

我正在使用如我的元素'的文件定义一些功能特性.querySelector（“core-menu”）'，使用'this。$。elementId'确实有效。谢谢！ – jdepypere

是的，'document'始终指向根文档（在所有Shadow DOM之外），即使在Polymer脚本代码中也是如此。如果你真的想要你可以使用'this.shadowRoots ['my-app']。querySelector（...）'，但是'this。$'更具惯用和DRY。 – CletusW

，并简化事情有点多，你可以使用声明的事件映射：

<paper-icon-button icon="menu" on-tap="{{nav}}"></paper-icon-button> 
<paper-icon-button icon="arrow-back" on-tap="{{back}}"></paper-icon-button>

然后在你的元素

Polymer('my-app', { 
    nav: function() { 
    this.$.drawerPanel.togglePanel(); 
    }, 
    back: function() { 
    window.history.back(); 
    } 
});

来源

2014-07-20 14:08:22

聚合物添加事件监听器

回答

相关问题