Shadow Element Scope `this` Is Not Binding

[Darin Hensley]

In polymer 1.0, I have a custom element. 

      startPlayer: function() {
        console.log('yow');
        this.playAnimation('entry');
        this.show = { backButton: true};
        youtubePlayer = this.$$('google-youtube');
        //for replay
        if (youtubePlayer.playbackstarted) {
         youtubePlayer.play();
        }
      },
      enableElement: function(e) {
        document.body.style.overflow = "hidden";
        this.show = { video: true};
        setTimeout(this.startPlayer.bind(this), 0);
      },

`setTimeout` correctly binds the `this` shadow scope and  `this.playAnimation('entry')` and the following functions are available in `startPlayer`.

But with:

      startPlayer: function() {
        console.log('yow');
        this.playAnimation('entry');
        this.show = { backButton: true};
        youtubePlayer = this.$$('google-youtube');
        //for replay
        if (youtubePlayer.playbackstarted) {
         youtubePlayer.play();
        }
      },
      enableElement: function(e) {
        document.body.style.overflow = "hidden";
        this.show = { video: true};
        var bob = this.startPlayer.bind(this);
        bob();
      },

this `window` object `this` is binded instead of the shadow element scope. This means the shadow element functions are not available as `this.foo` but instead are only available as `this.videoPlayer.foo`. How can I bind `this` of the shadow scope without using `setTimeout`?

[Eric Bidelman]

Maybe I'm misunderstanding, but startPlayer is a method on your element's prototype. You shouldn't need to bind it to `this` in the 2nd example. `this` is already the instance of your element.

Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/f595b225-a8e6-4419-8a76-9d75d97759d4%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Darin Hensley]

You are correct, thank you.

 There was a race condition that I can't explain, which made  it look like a scope issue. For some reason, only setTimeout(this.startPlayer.bind(this), 0) would allow the race condition in the  template dom-if  to work without breaking...even though it was just 0 seconds. I removed the 2nd template if which solved the issue without needing setTimeout. 

  <template>
    <template is="dom-if" if="{{show.video}}">
      <div class="layout vertical fit">
        <google-youtube style="height: 100%"
          video-id="YMWd7QnXY8E"
          rel="0"
          start="1"
          playsinline="0"
          controls="2"
          showinfo="0"
          width="100%"
          height="100%"
          autoplay="1">
        </google-youtube>
      </div>

      //Don't know why but the below was causing breakage where the google-youtube wasn't available. I ended up removeing the <template is="dom-if"..> which fixed the issue without needing setTimout.

      <template is="dom-if" if="{{show.backButton}}">
        <paper-button dialog-dismiss style="color: white; margin-top: 0px">
          <paper-icon-button icon="arrow-back"></paper-icon-button>
        </paper-button>
      </template>
    </template>
  </template>