javascript - 将当前 polymer 对象(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 代码:

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