Как я могу обрабатывать режим Polymer без внешних библиотек?

Я решил, что мне нужно будет сделать что-то вроде:

<li on-mouseover="{{ myHoverHandler }}">blah</li>, поскольку обработка кликов выглядит так:

<li on-click="{{ myClickHandler }}">blah</li>

Я попытался использовать способ, показанный в документации здесь: декларативное сопоставление событий, но on-mouseenter и on-mouseover работают не так, как ожидалось.

У меня также возникают проблемы с передачей параметров моим обработчикам, но это другая история.

Ответ 1

on-mouseover и on-mouseout являются правильными, здесь демо как Stack Snippet:

<script src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.3.3/platform.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.3.3/polymer.js"></script>

<my-app></my-app>
  
<polymer-element name='my-app'>
  <template>
    <button on-mouseover='{{onHovered}}' 
            on-mouseout='{{onUnhovered}}'>
      A humble button
    </button>
    <div>
      hovered: {{hovered}}
    </div>
  </template>
  <script>
    Polymer('my-app', {
      hovered: false,
      onHovered: function() {
        this.hovered = true;
      },
      onUnhovered: function() {
        this.hovered = false;
      }
    })
  </script>
</polymer-element>

Ответ 2

На самом деле это должно быть

<button on-mouseover='onHovered' 
        on-mouseout='onUnhovered'>

без фигурных скобок. Кроме того, вам не нужно передавать свойства, если вам нужно использовать их в функции обработчика событий.

Ответ 3

Если вам нужно реагировать на зависание на текущем компоненте "хост", вы можете использовать прослушиватели:

<dom-module id="hoverable-component">
  <template>
    <style>

    </style>

      <div>Hoverable Component</div>

  </template>

  <script>
    Polymer({
      is: 'hoverable-component',

      listeners: {
        mouseover: '_onHostHover',
        mouseout: '_onHostUnhover',
      },
      _onHostHover: function(e){
        console.debug('hover');  
      },
      _onHostUnhover: function(e){
        console.debug('unhover');  
      },

    });
  </script>
</dom-module>