Dynamic script tag insertion in a template

[Kasima Tharnpipitchai]

We're trying to render a script tag in one of our templates.  It looks a little like this:

<template name="stack_embed">

  <script data-for="newsbound-embed" data-width="800" data-url="{{explainer_url}}" src="/js/embed.js"></script>

</template>

And by "a little," I mean it looks exactly like that.

The script tag gets rendered in the right place but the javascript is never executed.  So we decided to insert a script tag directly into the DOM in a Template.rendered() function, which does execute the javascript.  However, we get this exception from spark:

Exception from Meteor._atFlush: TypeError: Cannot read property '_spark_137ff96f-7cdf-40e8-a352-12275fdc1198' of null at enclosingRangeSearch (http://localhost:3000/packages/liverange/liverange.js?6aa9b98f3d9213ded0d8fb2aa6c93df8cdfd94e1:668:15) at LiveRange.findParent (http://localhost:3000/packages/liverange/liverange.js?6aa9b98f3d9213ded0d8fb2aa6c93df8cdfd94e1:621:18) at findParentOfType (http://localhost:3000/packages/spark/spark.js?8b4e0abcbf865e6ad778592160ec3b3401d7abd2:81:19) at scheduleOnscreenSetup (http://localhost:3000/packages/spark/spark.js?8b4e0abcbf865e6ad778592160ec3b3401d7abd2:392:20) at Meteor._atFlush (http://localhost:3000/packages/deps/deps-utils.js?f3fceedcb1921afe2b17e4dbd9d4c007f409eebb:106:13) at _.extend.flush (http://localhost:3000/packages/deps/deps.js?933d82b6f13dbc7adbc51a6c30bb0f8928f42e98:63:15) at Array.forEach (native) at Function._.each._.forEach (http://localhost:3000/packages/underscore/underscore.js?47479149fe12fc56685a9de90c5a9903390cb451:79:11) at _.extend.flush (http://localhost:3000/packages/deps/deps.js?933d82b6f13dbc7adbc51a6c30bb0f8928f42e98:61:13) at Array.forEach (native)

So how can we do something like this and not make spark unhappy?  Ideally, we'd be able to just render the tag in the template but a workaround would be fine for now.

K

[Avital Oliver]

Just to check -- other than the error appearing in the console do other things misbehave? (Not saying we shouldn't fix this but just trying to fully understand the scope of the issue)

K

--
 
 

[David Glasser]

This looks like it may be related to https://github.com/meteor/meteor/issues/392

> --
>
>

[Dror Matalon]

What's the use case for doing something like this?

Why not:

<template name="stack_embed">
<div id='explainer'></div>
</template>

and then in the JS do something like
Template.stack_embed.rendered = function() {
Meteor.http.call(...);
$('#explainer').html(...);
};

You can then deal with error handling, and have better control of your flow.

On Wed, Dec 5, 2012 at 4:41 PM, Kasima Tharnpipitchai <kas...@gmail.com> wrote:

> --
>
>

[Kasima Tharnpipitchai]

Avital –

You are correct.  The only adverse effect we've seen is the console exception.  It does work.  Should we be concerned about the exception or can we just keep pushing through?

Dror –

The use case is embedding content from external services.  For instance, Google Ad Sense and Amazon Widgets use this method.

For our particular case, we are using our own embed code.  However, it is an embed code that we provide to other content producers and we'd like to use it in the same way they do.  Dogfood and all.

K

--

[David Glasser]

My impression is that that exception means that scripts are still
running on "unloaded" copies of the DOM because Spark.finalize hasn't
been called on it when it's swapped out. It might be an effect of what
your script does actually, not the script tag itself.

> --
>
>

[Kasima Tharnpipitchai]

David, I think you're right here.  I was just looking at issue 392 and comparing with our code.  Turns out we were replacing an existing DOM element.  We took that out and it seems to be exception free.

Any thoughts on getting script tags to load from inside a template?

K

--

[Ben Berman]

I'd suggest using DOM mutation observers to do post-Spark things like adding script tags. observer-summary works well for me. As long as I'm understanding this script tag as having a UI-related role.