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>
On Sunday, August 2, 2015 at 4:37:25 PM UTC-5, Darin Hensley wrote:
>
> 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`?
>
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 [email protected].
To view this discussion on the web visit
https://groups.google.com/d/msgid/polymer-dev/19eb91c2-9119-44d7-854a-474e8471cd00%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
