如何在Polymer中的ES6中編寫監聽器？

Question

我基本上想以ES6的方式編寫下面的代碼。

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

我已經使用如下但_onNeonAnimationFinish回調從來沒有發射的屬性嘗試。

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

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

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

那麼正確的方法是什麼？

Answer 1

以下元素代碼應該工作。查看代碼中的註釋以獲得解釋。

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