Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

onRendered of a Blaze template seems to fire before DOMElement content is ready. #260

Open
trusktr opened this Issue Jul 18, 2015 · 2 comments

Comments

Projects
None yet
2 participants
@trusktr
Copy link

trusktr commented Jul 18, 2015

For example, I have:

<template name="hwk1">
    {{#Node}}
        {{#DOMElement}}
            <canvas id="gl-canvas" width="100" height="100"></canvas>
        {{/DOMElement}}
    {{/Node}}
</template>
Template.hwk1.onRendered(()=>{
  document.getElementById('gl-canvas') // null
})

It seems like the DOMElement content isn't ready yet at that point.

I can work around it by doing:

<template name="hwk1">
    {{#Node}}
        {{#DOMElement}}
            {{>hwk1Content}}
        {{/DOMElement}}
    {{/Node}}
</template>

<template name="hwk1Content">
    <canvas id="gl-canvas" width="100" height="100"></canvas>
</template>
Template.hwk1Content.onRendered(()=>{
  document.getElementById('gl-canvas') // it works
})
@gadicc

This comment has been minimized.

Copy link
Owner

gadicc commented Jul 18, 2015

I think your "workaround" will most likely be our recommended pattern.

The way Engine is written, stuff being added to the Scene graph has no relation to when it's on the DOM. I could provide an _onRender hook for DOMElement's, which could perhaps be a useful shortcut, but I know some people have found it a source of confusion too.

I think probably what you described is the most straight-forward Meteor way of doing things, I'd like to encourage the idea of separation of "scene graph is a different world to the DOM, and you should use famous-views stuff in there... but anything inside a DOMElement is regular Meteor land as far as the DOM is concerned".

@trusktr

This comment has been minimized.

Copy link
Author

trusktr commented Jul 18, 2015

I totally don't know, but it seems to me like

Template.hwk1Content.onRendered(()=>{
  document.getElementById('gl-canvas') // it works
})

is a race condition, because if I can't access the parent DOMElement's HTMLElement when the parent has onRendered, how is it that I can call document.getElementById('gl-canvas') in the child if I can't access it in the parent (assuming the child onRendered fires first before the parent)? Or does the child onRendered fire after the parent?

Are there docs on how to make a component so that it accepts children? f.e.

{{#MyComponent}}
  put stuff here
{{/MyComponent}}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.