聚合物点击事件未触发

Question

聚合物点击事件未触发

7

目前我正在尝试使用Polymer技术。现在，我有一个简单的页面上面有一个paper-button按钮，但是我无法为它注册点击事件。我尝试了以下代码：

<paper-button raisedButton 
              id="test"
              class="colored" 
              label="Click"
              link="http://twitter.com"
              on-click="{{ goLink }}">
</paper-button>

<script>
        Polymer('#test', {
            goLink: function(e) 
            {
                window.location.href = e.target.getAttribute('link');
            }
       });
</script>

点击事件没有被触发。代码有什么问题吗？第二个问题：在我的代码中应该使用on-click还是on-tab？

- Cilenco

它也不能与 on-tap 一起使用。 - Cilenco

3个回答

4

我知道这是一个旧的帖子，但因为更多的人可以像我一样到达这里，请看下面的正确和更新的答案，适用于 Polymer 1.x（Dirk Grappendorf 的答案基本正确但已过时）：

创建 Polymer 元素的方法如下：

<dom-module id="module-name">
  <style>
    Enter your CSS style here
  </style>
  <template>
    <paper-button raisedButton id="test" link="http://twitter.com" on-tap="goLink">Click</paper-button>
  </template>
  <script>
    Polymer({
      is: 'module-name',
      goLink: function(e) {
        window.location.href = e.target.getAttribute('link');
      }
    });
  </script>
</dom-module>

为创建一个自动绑定模板：

<template id="bind" is="dom-bind">
  <paper-button raisedButton id="test" link="http://twitter.com" on-tap="goLink">Click</paper-button>
</template>
<script>
  var bind = document.querySelector('#bind');
  bind.goLink = function(e) {
    window.location.href = e.target.getAttribute('link');
  };
</script>

或者使用监听器:

<paper-button raisedButton id="test" link="http://twitter.com">Click</paper-button>
<script>
  var button = document.getElementById('test');
  button.addEventListener('tap', function(e) {
    window.location.href = e.target.getAttribute('link');
  });
</script>

paper-icon-button 和 paper-fab 的工作方式完全相同。

应该选择什么？如果我要在更多项目或同一项目的其他部分重复使用此按钮，则我会选择创建一个元素；如果我的界面有许多事件需要处理，那么我会选择自动绑定（将整个UI封装在一个dom-bind模板中，并使用bind.handlerName语法创建所有必要的处理程序，而不是为触发事件的所有UI元素创建侦听器和每个事件相同元素的一个侦听器）。第三个选项，只有当其他选项无法实现我想要的内容（例如当您触发自定义事件时）或页面中只有1或2个事件要触发时才使用侦听器（在这种情况下，代码似乎比其他选项短）。

- Vinícius A. Jorge

1

对于 Polymer 2，你可以这样做：

<dom-bind id='top'>
  <template>
   <paper-button raisedButton id="test" link="http://twitter.com" on-tap="goLink">Click</paper-button>
  </template>
</dom-bind>

<script>
  const bind = document.getElementById('top');
  bind.goLink = ()=>{ }
</script>

你的模板会立即被标记，所有数据绑定都是相对于dom绑定元素的。

然后你甚至可以添加双向绑定等功能，例如：

<dom-bind id='top'>
  <template>
   <paper-button raisedButton id="test" link="[[url]]" on-tap="goLink">[[display]]</paper-button>
  </template>
</dom-bind>

<script>
  const bind = document.getElementById('top');
  bind.goLink = ()=>{ }
  bind.url = 'http://twitter.com'
  bind.display = 'Click'
</script>

请查看https://www.polymer-project.org/2.0/docs/devguide/templates#dom-bind。

如果您需要快速而不那么规范的解决方案，您可以使用全局事件处理程序（不过这并不是最好的选择...）。

<paper-button raisedButton id="test" link="http://twitter.com" onclick="goLink()">Click</paper-button>

<script>
  window.goLink = ()=>{}
</script>

- Steven Spungin

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

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

- Dirk Grappendorf · Accepted Answer

您不能仅通过使用任意元素的 ID 调用 Polymer() 函数来定义 Polymer 组件。必须要创建一个包含按钮和处理程序代码的 Polymer 元素，如下所示：

<body unresolved>

  <polymer-element name="link-button">
    <template>
      <paper-button raisedButton id="test" class="colored"
        label="Click" link="http://twitter.com"
        on-click="{{ goLink }}">
      </paper-button>
    </template>
    <script>
      Polymer('link-button', {
        goLink: function(e) {
          window.location.href = e.target.getAttribute('link');
        }
      })
    </script>
  </polymer-element>

  <link-button></link-button>

</body>

或者您需要在自动绑定模板中包装按钮：

<body unresolved>

  <template id="bind" is="auto-binding">
    <paper-button raisedButton id="test" class="colored"
      label="Click" link="http://twitter.com"
      on-click="{{ goLink }}">
    </paper-button>
  </template>

  <script>
    var bind = document.querySelector('#bind');
    bind.goLink = function(e) {
      window.location.href = e.target.getAttribute('link');
    }
  </script>

</body>

使用第一个版本，您可以将硬编码的链接（以及可能的其他值）转换为属性，从而创建可重用的link-button元素。

顺便说一下，您可以使用'on-tap'或'on-click'。当您用鼠标点击按钮时，两个事件都会被触发。

编辑：

如果您只想要花哨的纸质按钮，您可以通过向元素添加事件侦听器来省去任何特定于Polymer的编程:

<paper-button raisedButton id="test" class="colored"
  label="Click" link="http://twitter.com">
</paper-button>

<script>
  document.querySelector('#test').addEventListener('click', function(e) {
    window.location.href = e.target.getAttribute('link');
  })
</script>

如果您只关注组件消费者方面，那么您就会错过Polymer（以及Web组件）的很多强大功能。