Polymer：クラスの追加と削除

Question

<div>は、CSSを使用してアニメーション化するPolymerテンプレート内にあります。特定のオブザーバー関数（onTriggered）が呼び出されるたびにアニメーションを再トリガーできるようにしたい。

私は、オブザーバーが再び呼び出されたときに再度トリガーできるように、CSSクラスを追加してから削除しようとしましたが、Cannot read property 'myContainer' of undefinedを返します。これは、Javascriptの関数内で呼び出すことができないPolymerオブジェクトが原因であると理解していますが、代替の解決策が見つかりません。同期（x秒後）ポリマー要素にCSSクラスを削除し、その後追加とするための最良の方法だろう何

onTriggered: function (newData, oldData) { 
    if (oldData && oldData !== newData) { 
     this.$.myContainer.classList.add("animated", "jello"); 
     setTimeout(function() { 
      this.$.myContainer.classList.remove("animated", "jello"); 
     }, 1000); 
    } 
} 

？

Answer 1

setTimeoutコールバック関数でスコープが変更されたためです。コールバック内でthisを使用するように範囲を変更する必要があります。

てみてください：

setTimeout(function() { 
    this.$.myContainer.classList.remove("animated", "jello"); 
}, 1000, this); 

またはこれを：@Kejtが言ったように

setTimeout(function() { 
    this.$.myContainer.classList.remove("animated", "jello"); 
}.bind(this), 1000); 

Answer 2

は、スコープは確かに問題でした。これを解決するために、私はすなわち、変数にthisを割り当て、その後、setTimeout関数内の変数を参照するために：右のトラックに私を置くための

this.$.myContainer.classList.add("animated", "jello"); 
var polymerThis = this; 
setTimeout(function() { 
    polymerThis.$.myContainer.classList.remove("animated", "jello"); 
}, 1000);