Polymer.js将处理程序附加到标准HTML DOM中的paper-button

Question

Polymer.js将处理程序附加到标准HTML DOM中的paper-button

javascriptpolymermaterial-designdom-events

3

我有四个按钮，正在尝试各种以声明方式附加处理程序：

<paper-button id="btnEnter" class="enabled" raised roll="button" on-tap="lm.LoaderActionEnter">Enter</paper-button>
<paper-button id="btnRW" class="disabled" raised roll="button">
    <core-icon icon="av:fast-rewind" on-tap="lm.LoaderActionRW()"></core-icon>
</paper-button>
<paper-button id="btnPause" class="enabled" raised roll="button">
    <core-icon icon="av:pause-circle-outline" onclick="lm.LoaderActionPause()"></core-icon>
</paper-button>
<paper-button id="btnFF" class="disabled" raised roll="button">
    <core-icon icon="av:fast-forward" on-tap="{{lm.LoaderActionFF}}"></core-icon>
</paper-button>

唯一有效的是标准的 onclick =“handler（）”。我认为 on-tap =“handler”是正确的方法？上述代码在普通的index.html页面中，在页面的常规流程中。Javascript和聚合物代码在主页呈现后进行了惰性加载（闪屏页）。

最好的做法是什么？我只发现使用"{{handler}}"的演示，但是如何设置数据绑定？

- user1541413

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- DocDude · Accepted Answer

on-tap="{{handler}}" 语法是 Polymer 特有的，它仅在 Polymer 元素的模板或自动绑定模板中工作。 onclick 属性有效是因为它内置于 DOM 中，但我们通常建议不要使用 click 事件，因为它会在某些移动浏览器上引入延迟。

因此，如果您的索引页没有使用自动绑定模板，我建议您采用命令式编程来实现：


Polymer.addEventListener(document.getElementById('btnEnter'), 'tap', lm.LoaderActionEnter);

您可能会问，为什么要使用 Polymer.addEventListener 而不是只使用 addEventListener？这是与 Polymer 手势库相关的便利方法，它生成 tap 手势。

调用 Polymer.addEventListener 确保一切设置正确以生成所需的事件。（例如，对于某些浏览器，您可能需要指定 touch-action CSS 属性才能接收原始触摸事件。）

通过 on- 处理程序声明注册的事件处理程序自动通过此路径进行处理，因此在大多数时候，当您使用 Polymer 时，您不需要直接调用 Polymer.addEventListener。