Question

我在index.html中有<div id="play-button-png" on-click="open-video"></div>。在不创建自定义元素的情况下，如何为其创建事件侦听器并将其绑定在单独的文件中？与Angular的控制器类似，您可以在其中绑定元素而无需创建指令。

Answer 1

你会使用'dom-bind'模板（也称为'自动绑定模板'）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-change'事件

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>

Polymer 1.0-绑定事件处理程序，而不必创建自定义元素

2 个答案: