javascript - polymer - 该对象在功能中不可用

Question

使用 polymer 1.0。我需要setTimout因为 <template is="dom-if" if="{{foo.bar}}"> 存在竞争条件和<google-youtube>当我运行 this.$$('google-youtube'); 时可用。为了保持代码整洁，我喜欢 startPlayer玩家被抽出。但是this对象不可用于 setTimeout(this.startPlayer, 1000);调用它。我怎样才能解决这个问题？由于这些函数是 Object.create() 的属性不知道怎么办。

<script>
    Polymer({
      is: "video-player",
      behaviors: [ 
        Polymer.PaperDialogBehavior,
        Polymer.NeonAnimationRunnerBehavior
                 ],
      properties: {
        foo: Object,
        entryAnimation: {
          value: 'scale-up-animation'
        }
      },
      listeners: { 'iron-overlay-opened': 'enableElement',
                   'iron-overlay-closed': 'stopPlayer'
      },
      startPlayer: function() {
        youtubePlayer = this.$$('google-youtube');
        if (youtubePlayer.playbackstarted) {
         youtubePlayer.play();
        }
      },
      enableElement: function(e) {
        //this.playAnimation();
        this.foo = { bar: true};
        setTimeout(this.startPlayer, 1000);
      },
      stopPlayer: function(e) {
        youtubePlayer = this.$$('google-youtube');
        youtubePlayer.pause();
        youtubePlayer.seekTo(5);
      }
    });
  </script>

Answer 1

替换这个:

setTimeout(this.startPlayer, 1000);

...这样:

setTimeout(this.startPlayer.bind(this), 1000);

如果您不熟悉 .bind() 的工作原理，请参阅 MDN docs 的快速说明。 :

The bind() method creates a new function that, when called, has its this keyword set to the provided value, with a given sequence of arguments preceding any provided when the new function is called.

请注意 .bind() 在 <=IE8 中不可用，但它很容易polyfill 。如果您不喜欢填充(并且需要 IE8 中的支持)，您也可以用以下代码替换该行代码:

var self = this;
setTimeout(function() {
    self.startPlayer();
}, 1000);