Передача текущего объекта полимера (this) в функцию обратного вызова

Question

Каков наилучший способ передать текущий объект функции обратного вызова?

Я использую что-то вроде:

var that = this; 

Например:

<link rel="import" href="/bower_components/polymer/polymer.html"> 
<polymer-element name="stackx-example"> 
    <template> 
     <div id="container">{{innards}}</div> 
    </template> 
    <script> 
     Polymer('stackx-example', { 
      ready: function() { 
       var jax = new XMLHttpRequest(); 
       jax.open('GET', '/jaxson/testing/', true); 
       jax.send(); 
       var that = this; 
       jax.onreadystatechange = function(){ 
       if (jax.readyState == 4 && jax.status == 200) { 
        that.innards = jax.responseText; 
       } 
      } 
      }, 
      innards: '..missing' 
     }); 
    </script> 
</polymer-element> 

Answer 1

Вы можете использовать Function.prototype.bind(), чтобы установить значение this внутри обратного вызова к тому же this значения, используемого вне обратный вызов:

jax.onreadystatechange = function() { 
    if (jax.readyState == 4 && jax.status == 200) { 
    this.innards = jax.responseText; 
    } 
}.bind(this); 

Как немного касательная, это отличная возможность использовать <core-ajax> вместо простой XMLHttpRequest. Это приведет к более идиоматическому полимерному коду:

<polymer-element name="stackx-example"> 
    <template> 
     <div id="container">{{innards}}</div> 

     <core-ajax auto 
       url="/jaxson/testing/" 
       handleAs="text" 
       response="{{innards}}"> 
     </core-ajax> 
    </template> 

    <script> 
     Polymer({ 
     innards: '..missing' 
     }); 
    </script> 
</polymer-element>