How to write listeners in ES6 in Polymer?

Question

I basically want to write the following code in ES6 fashion.

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

I have tried using a property like the following but the _onNeonAnimationFinish callback is never fired.

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

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

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

So what is the correct way?

Stickpin

I have no idea if this works or not, but have you tried doing it like the behaviours and defining a get listeners() { return {'...':'...}} – Tarrant

I tried that too but same result. :( – Stickpin

I would have done that too... – Aristate

DId you register your element with Polymer? This (polymer-project.org/1.0/articles/es6.html) article shows it, and since in his example StockTicker is passed to the Polymer constructor - thats what makes me think that a get listeners() function which returns {'neon-animation-finish':'_onNeonAnimationFinish'} should do it. – Tarrant

I have figured out a way of getting this particular example to work. The problem is not that the listeners aren't getting added or fired, try adding a tap event handler, it works fine. The problem is with the attributes specified in the NeonAnimationRunnerBehavior, specifically the property _animationMeta meta isn't present on the instance of the element. You should get the error Uncaught TypeError: Cannot read property 'byKey' of undefined in your console when you run the method playAnimation on the instance. Can you confirm if there is indeed such an error in console?. – Terbia

Answer 1

Following element code should work. Look at the comments in the code for explanation.

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

Terbia