W jaki sposób mogę obsłużyć sposób Polymer bez zewnętrznych bibliotek?

Question

Pomyślałem, że muszę zrobić coś takiego:

<li on-mouseover="{{ myHoverHandler }}">blah</li> ponieważ obsługi kliknięcia wygląda następująco:

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

Próbowałem stosując sposób przedstawiony w dokumentacji tutaj: declarative event mapping, ale on-mouseenter i on-mouseover nie działają zgodnie z oczekiwaniami.

Mam również problemy z przekazywaniem parametrów do moich programów obsługi, ale to już inna historia.

Answer 1

on-mouseover i on-mouseout są poprawne, oto demo jako 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>

Jest możliwe, że element nie posiada właściwości myHoverHandler. Być może jest literówka?

Co do tego, czy stosować wiązanie zdarzeń polimerowych w porównaniu z innymi metodami, można to zrobić z użyciem jilli lub jilli wanilii. Polymer zajmuje się nieco pracowitym działaniem, na przykład upewniając się, że program obsługi zdarzeń jest zarejestrowany w szablonach warunkowych i powtarzalnych, wiążąc element, który zwykle jest tym, czego oczekujesz, i wyrejestrowuje procedury obsługi, gdy ich elementy są usuwane z DOM. Są jednak chwile, kiedy robienie tego ręcznie ma sens.

Answer 2

Właściwie powinno być

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

bez nawiasów klamrowych. Ponadto nie trzeba przekazywać właściwości, jeśli trzeba ich używać w funkcji obsługi zdarzeń.

Answer 3

w przypadku trzeba reagować na najechaniu na obecnym składnikiem „gospodarza”, można użyć słuchaczy:

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