Question

目前我正在尝试使用Polymer的第一步。现在我有一个带有纸质按钮的简单页面，但我无法为其注册点击事件。我试过这段代码：

<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>

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

Answer 1

您不能通过简单地调用具有某个任意元素的id的Polymer()函数来定义Polymer组件。您需要create a Polymer element包含按钮和处理程序代码，如下所示：

<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>

或者您需要将按钮包裹在auto-binding template：

中

<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'。单击鼠标按钮时会触发这两个事件。

修改

如果你想要的只是花哨的纸质按钮，只需在元素中添加一个事件监听器，你就可以不用任何聚合物特定的编程：

<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>

但我认为如果你只关注它的组件 - 消费者方面，你会错过聚合物（以及一般的Web组件）的很多功能。

Answer 2

我知道这是一个老线程，但因为更多的人可以到这里，像我一样，看到右边和更新的答案，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个事件（在这种情况下，代码似乎更短）比其他选项）。

Answer 3

对于聚合物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绑定元素相关。

然后你甚至可以添加2路绑定等，例如：

<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>

不会触发聚合物单击事件

3 个答案: