Question

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

<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 =＆＃34; handler（）＆＃34;。我假设on-tap =＆＃34; handler＆＃34;会是要走的路？上面的代码在普通的index.html页面中，在页面的常规流程中。在主页面渲染（启动页面）后，javascript和聚合物代码被延迟加载。

最好的方法是什么？我只找到使用＆＃34; {{handler}}＆＃34;的演示，但是如何设置数据绑定？

Answer 1

on-tap="{{handler}}"语法是Polymer特定的; 只能在Polymer元素的模板内或auto-binding template内工作。

onclick属性有效，因为它内置于DOM中，但我们通常建议不要使用click事件，因为它会在某些移动浏览器上引入延迟时间。

因此，如果您没有为索引页面使用自动绑定模板，我建议您必须执行此操作，而不是：

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

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

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

使用on-handler以声明方式注册的事件处理程序会自动遍历此路径，因此大多数情况下，当您使用Polymer时，不需要直接调用Polymer.addEventListener。

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

1 个答案: