javascript - Polymer 1.0 - 绑定(bind)一个事件处理程序而无需制作自定义元素

Question

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

Answer 1

您将使用“dom-bind”模板(也称为“自动绑定(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
};

编辑:有时您需要等待模板绑定(bind)后才能进行任何操作。然后你会等待'dom-change'事件

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