聚合物1.0-綁定一個事件處理程序而不必製作自定義元素

Question

我在index.html中有<div id="play-button-png" on-click="open-video"></div>。如果不製作自定義元素，我如何才能爲其創建事件偵聽器並將其綁定到單獨的文件中？與Angular的控制器類似，您可以在其中綁定元素而不必創建指令。

Answer 1

你可以使用「DOM-bind'template（也被稱爲 '自動綁定模板'）https://www.polymer-project.org/1.0/docs/devguide/templates.html#dom-bind

<template is="dom-bind" id="app"> 
    //document body 
    <div id="play-button-png" on-click="openVideo"></div> 
</template> 

然後添加功能的模板範圍

var app = document.querySelector('#app'); 
app.openVideo = function() { 
    // do something when clicked 
}; 

編輯：有時在操作任何東西之前，您需要等待模板被綁定。那麼你會等待 'DOM的變化' 事件

app.addEventListener('dom-change', function() { 
    // auto-binding template is ready. 
}); 

Answer 2

這裏有另一種解釋https://www.polymer-project.org/1.0/docs/devguide/events

事件監聽器設置

<dom-module id="x-custom"> 
    <template> 
    <div>I will respond</div> 
    <div>to a tap on</div> 
    <div>any of my children!</div> 
    <div id="special">I am special!</div> 
    </template> 

    <script> 
    Polymer({ 

     is: 'x-custom', 

     listeners: { 
     'tap': 'regularTap', 
     'special.tap': 'specialTap' 
     }, 

     regularTap: function(e) { 
     alert("Thank you for tapping"); 
     }, 

     specialTap: function(e) { 
     alert("It was special tapping"); 
     } 

    }); 
    </script> 
</dom-module> 

註釋事件偵聽器設置

<dom-module id="x-custom"> 
    <template> 
    <button on-tap="handleTap">Kick Me</button> 
    </template> 
    <script> 
    Polymer({ 
     is: 'x-custom', 
     handleTap: function() { 
     alert('Ow!'); 
     } 
    }); 
    </script> 
</dom-module>