Полимерные событие click не срабатывает

на данный момент я пробую свои первые шаги с полимерным. Теперь у меня есть простая страница с бумажной кнопкой, но я не могу зарегистрировать событие click для нее. Я пробовал с этим кодом:

<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 в моем коде?

7
javascript polymer

3 ответов

вы не можете определить полимерный компонент, просто вызвав 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". Оба события запускаются при нажатии кнопки с помощью мыши.

Edit:

если все, что вам нужно, это кнопка fancy paper, вы можете обойтись без какого-либо полимерного программирования, просто добавив прослушиватель событий к элементу:

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

но я думаю, что вы пропустите много силы полимера (и веб-компонентов в целом), если вы сосредоточитесь только на компонент-потребительская сторона.

16

Я знаю, что это старая нить, но потому, что больше людей могут получить здесь, как я, см. ниже Правильный и обновленный ответ, полимер 1.X совместимость (ответ Дирка Граппендорфа был довольно прав, но устарел):

для создания полимерного элемента:

<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 работают точно так же.

что выбрать? Я бы выберите создать элемент, если я собираюсь повторно использовать эту кнопку в нескольких проектах или в других частях того же проекта; автоматическая привязка, если я не собираюсь повторно использовать этот код, но мой интерфейс имеет много событий для обработки (проще инкапсулировать весь пользовательский интерфейс в один шаблон DOM-bind и создать все необходимые обработчики с помощью bind.синтаксис handlerName, чем создавать прослушиватели для всех элементов пользовательского интерфейса, которые запускают события - и один прослушиватель для каждого события запускает один и тот же элемент). И опции , прослушиватели, только если то, что я хочу, не может быть выполнено другими параметрами (например, когда вы запускаете пользовательские события) или на странице есть только 1 или 2 события (в этом случае код кажется короче, чем другие параметры).

4

для полимера 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 bind.

вы могли бы даже добавить 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>
1