同じ要素内のノードのリスナーコールバック内の要素のメソッドへのアクセス

Question

クリックリスナーを接続したノードのコールバック内のdom内のメソッドにアクセスする際に問題が発生しました。理由を見つけてください。私は以下のことを試しました。

はここでコールバック内でメソッドにアクセスすることに責任を負うコードの一部です：

<dom-module id="my-view2"> 
    <template> 

    ...html codes ... 

    </template> 

    <script> 
    Polymer({ 
    is: 'my-view2', 

    ... properties, etc ... 


//******* trying to access a method ******************* 
    handleClick: function(e) { 
    var btn = document.createElement("paper-button"); 
    btn.addEventListener("click", function() { 
    var el = Polymer.dom(this).querySelector('#my-view2'); 
    el.methodToAccess(); 
    }); 
    } 

    methodToAccess: function() { 
    console.log('success'); 
    }, 

}); 

私はこれらのすべてを試してみました。それらの

this.$$('#my-view2") 
document.querySelector("#my-view2"); 
Polymer.dom(this.root).querySelector('#my-view2'); 
Polymer.dom(this).querySelector('#my-view2'); 
this.getElementById('my-view2'); 

どれも機能していないと、すべての結果でnullのプロパティ 'methodToAccess'を読み取ることができません。私は間違って何をしていますか？

Answer 1

コールバック関数を現在のthisスコープにバインドすると、methodToAccessに直接アクセスできます。あなたはそれをimperative add/remove listenersを用いた高分子の方法をやってみたいことが言われていること

handleClick: function(e) { 
var btn = document.createElement("paper-button"); 
btn.addEventListener("click", function() { 
    this.methodToAccess(); 
}.bind(this)); 
} 

：

this.listen(this.$.myButton, 'tap', 'onTap'); 
this.unlisten(this.$.myButton, 'tap', 'onTap'); 

HTH