Como escrever ouvintes no ES6 no Polymer?

9

Eu basicamente quero escrever o seguinte código no modo ES6.

 listeners: {
    'neon-animation-finish': '_onNeonAnimationFinish'
 },

Eu tentei usar uma propriedade como a seguinte, mas o retorno de chamada _onNeonAnimationFinish nunca é acionado.

class MyElement {
    get behaviors() {
        return [Polymer.NeonAnimationRunnerBehavior];
    }

    beforeRegister() {
        this.is = 'my-element';
        this.properties = {
            name: {
                type: String
            }
        };

        this.listeners = {
            'neon-animation-finish': '_onNeonAnimationFinish'
        };
    }

Então, qual é o caminho correto?

    
por Jessica 01.12.2015 в 13:17
fonte

1 resposta

2

O código do elemento a seguir deve funcionar. Veja os comentários no código para explicação.

<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/neon-animation/neon-animation-runner-behavior.html">
<link rel="import" href="bower_components/neon-animation/animations/scale-down-animation.html">

<dom-module id="my-animatable">

  <style>
    :host {
      display: inline-block;
      border-radius: 50%;
      width: 300px;
      height: 300px;
      background: orange;
    }
  </style>

  <template>
    <content></content>
  </template>

</dom-module>

<script>
  (function() {
    'use strict';

    var behaviors = Symbol('behaviors');

    class MyAnimatable {
      get behaviors() {
        if (!this[behaviors]) {
          this[behaviors] = [Polymer.NeonAnimationRunnerBehavior];
        }

        return this[behaviors];
      }

      //this setter is key to solving this bug. The 'NeonAnimationRunnerBehavior'
      //is an array with two behaviors in it. Polymer allows a
      //behavior to be an array or an object, because of this it flattens
      //nested behaviors into a single array containing only objects and
      //sets it on the prototype, since your implementation didn't have a
      //setter the flattened behavior was lost!.
      set behaviors(value) {
        this[behaviors] = value;
      }

      beforeRegister() {
        this.is = 'my-animatable';

        this.properties = {
          animationConfig: {
            type: Object,
            value: function() {
              return {
                name: 'scale-down-animation',
                node: this
              }
            }
          }
        };

        this.listeners = {
          'neon-animation-finish': '_onNeonAnimationFinish'
        };
      }

      animate() {
        this.playAnimation();
      }

      _onNeonAnimationFinish() {
        alert('_onNeonAnimationFinish');
      }
    }

    Polymer(MyAnimatable);
  })();
</script>
    
por Ajinkya 05.12.2015 / 20:00
fonte