聚合物添加事件監聽器

我正在使用聚合物，我很困惑至於什麼時候應該使用什麼類型的綁定。例如說我有以下代碼：聚合物添加事件監聽器

<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

聚合物添加事件監聽器

回答

相關問題