Question

How can I know when the dom node I care about in a template is rendered. I would like to be able to select it with jQuery or template.find and either modify it or attach callbacks? I’ve been using Template.templateName.rendered, but it’s hit or miss. Sometimes the element I want has not been inserted in the dom even though the template is rendered. If I setTimeout within template.rendered for a 2-3 seconds and then try to select an element it is almost always there, but this obviously a kludge.

Template.templateName.rendered = ->
    # This is a kludge!
    wait 2000, =>
        $(window).resize =>
            # Neither of these selectors find anything without the wait
            $iframe = $(this.find('#embed-html iframe'))
            width = $('#embed-html').innerWidth()
            resizeIframe($iframe, width)
        $(window).resize()

Answer 1

The rendered event is the correct way of doing this and will be fired each time the template is inserted into the DOM. Have you tried doing this without the iframe? It’s possible the iframe is messing things up, in which case you could try testing the iframe with a local document source to see if loading speeds of the iframe are affecting how the find method returns elements.

You definitely shouldn’t have to wait for anything before talking to the DOM, so something weird is happening.