将当前聚合物对象（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>